web-dev-qa-db-ja.com

データムからd3.js要素の属性にアクセスしますか？

私はすでに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を初めて使用するので、とにかくこれを前から後ろに近づいているのか、組み込みのソリューションを逃したかもしれませんか？

javascriptsvgd3.js
44
Mike Winter

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

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

これにより、選択した最初の非null要素の属性のみが提供されます。 filter 選択して、探している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") );
  }
}
66
Josh

さらに簡単な方法があります：（インデックスiが指定されている場合）

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

ご覧のとおり here 。

12
VividD

受け入れられた回答のフィルター方法は正しいです。受け入れられた回答（.eachを使用）の2番目のアプローチは間違っており、質問者が作成したのと同じエラーが含まれています。未定義になります（自分を含むすべての初心者が期待する「現在の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に置き換えることができます。

10
mathheadinclouds