2012-07-04 11 views
43

私はすでにd3.jsの.data()関数を使って画面に描画した特定のsvgサークルのcx &属性にアクセスしようとしています。アクセスしようとしているコードは以下のとおりです。データからd3.js要素の属性にアクセスしますか?

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 
    } 
} 

私は& JavaScriptをd3.jsするのは非常に新しいので、私は、私はとにかくか、おそらく前に、この背面に近づいていた場合、私は作り付けのソリューションを見逃している可能性がわからないんだけど?

+0

あなたはd.c​​xを試しましたか? d3.selectAll( "。mynode")で.dataを呼び出し、データへの引数がcxフィールドのオブジェクトを含んでいた場合、それはうまくいくはずです。 – mathheadinclouds

答えて

65

あなたが本当にしたいことのように、SVGのDOM要素からその属性を取得するときにあなたのコードは、データの項目からSVG属性を取得しようとしている:

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

これだけあなたを与えるだろう選択の最初のnull以外の要素の属性。あなたは、各機能にthisを使用し、選択したすべての要素の属性にアクセスしたい場合

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

または、:あなたはまた、filterあなたの選択はあなたが探しているDOM要素を取得することができます

d3.selectAll(".mynode").each(function(d, i){ 
    if(d.someId == targetId){ 
    console.log(d3.select(this).attr("cx")); 
    } 
} 
+1

私は前に 'd3.select(this).attr(" cx ")'を使っていましたが、 'null'を返していましたが、結局私はsvgグループ要素(doh!)の' cx'属性を要求していました。グループ要素内のサークル要素にアクセスするために 'd3.select(this.firstChild).attr(" cx ")'に変更する必要がありました。firstChild/lastChildなどの使用は気に入らないのですが、今のところ動作します。あなたはそれを提案していない場合、私はフィルターメソッドについても考えていないだろう、私はまだ具体的なデータ値を検索中にそれを実装する方法については完全にはわからないが、ありがとう! –

+0

また、コマンドのチェーンの早い段階でそのコマンドにアクセスしようとすると、特定の値がまだ設定されていないと、nullを返すことがあります。 – greg

12

受け入れられた回答のフィルタ方法が正しいです。受け入れられた答え(.eachを使って)の2番目のアプローチは間違っていて、質問者が作ったのと同じエラーが含まれています:.data()が呼び出されない場合(ここではそうです)、最初の引数dは.each (自分自身を含むすべての初心者が期待するように、 "現在のドミノノード"ではなく)未定義です。 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(バージョン、すなわちフィルタおよびそれぞれの両方のコードを含む)

UPDATE:あなたはコードを与えていないので、私の答えは、)(あなたが.dataの使用しなかったと仮定しました。それのために。後で私はあなたがあなたのデータ構造に応じてd.attr( "cx")をplain d.cxに置き換えると.data()

を使用したと書きました。

11

は、さらに簡単な方法があります:

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

(提供指数iが与えられている)、それはhereを見ることができるように。

関連する問題