48

d3.jsの.data（）関数を使用してすでに画面に描画している特定のsvg円のcx＆cy属性にアクセスしようとしていますが、誰か助けてもらえますか？アクセスしようとしているコードは以下のとおりです。

d3.selectAll(".mynode").each( function(d, i){
  if(d.someId == targetId){
    console.log( d.attr("cx") );    // just trying to demo my point, doesn't work
  }
}

私はd3.jsとjavascriptにまったく慣れていないので、とにかくこれに後ろから前に近づいているのか、おそらく組み込みのソリューションを見逃しているのかわかりませんか？

4

4 に答える 4

72

次のように、コードがデータのアイテムからsvg属性を取得しようとしていますが、本当に必要なのはsvgDOM要素からその属性を取得することです。

console.log(d3.selectAll(".mynode").attr("cx"));

これにより、選択した最初のnull以外の要素の属性のみが提供されます。選択内容をフィルタリングして、探しているDOM要素を取得することもできます。

console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx"));

または、選択したすべての要素の属性にアクセスする場合thisは、各関数で次を使用します。

d3.selectAll(".mynode").each( function(d, i){
  if(d.someId == targetId){
    console.log( d3.select(this).attr("cx") );
  }
}
于 2012-07-05T00:25:42.240 に答える
12

さらに簡単な方法があります:(インデックスiを提供する）

d3.selectAll("circle")[0][i].attributes.cx.value

ここで見ることができるように。

于 2014-06-29T23:38:08.090 に答える
10

受け入れられた答えのフィルター方法は正しいです。受け入れられた回答の2番目のアプローチ（.eachを使用）は正しくなく、質問者が行っていたのと同じエラーが含まれています：.data（）が呼び出されない場合（ここではそうです）、最初の引数dが.eachに渡されます未定義になります（私を含むすべての初心者が期待するように、「現在のdomノード」ではありません）。d3.select（this）を介して取得する現在のdomノード。これは、最後のifステートメント内で正しいです。エラーはifテスト条件にあります。正しいバージョンは次のとおりです。

d3.selectAll(".mynode").each(function(d,i){
    var elt = d3.select(this);
    if (elt.attr("id") == "yourTargetIdGoesHere"){
        console.log( elt.attr("cx") );
    }
});

fiddle：fiddle（両方のバージョンのコード、つまりフィルターとそれぞれを含む）

更新：私の答えは、.data（）を使用しなかったと想定していました。これは、そのためのコードを提供しなかったためです。後で、.data（）を使用したと書いているのを見ました

その場合、データ構造によっては、d.attr（ "cx"）をプレーンなd.cxに置き換えると機能する場合があります。

于 2014-05-21T16:25:06.627 に答える
0

ここで最も簡単なのは、各ノードに一意のIDを指定してから、ターゲットIDを持つノードを選択して変換を実行することです。

于 2020-12-05T23:36:23.190 に答える