D3のデータSVG要素にアクセスする方法を

Question

だから私はD3が行っているこの豪華なビジュアライゼーションの自分自身のバージョンを作成しようとしています：

http://mbostock.github.com/d3/talk/20111116/bundle.html

私は基本的にチャート全体を動かしているやっているすべての左側にある別の関係を表示しようとするので、左側の名前にマウスを重ねるたびに、さまざまなタイプの接続がチャートの色を変えるだけでなく、これらの接続の名前も表示されます右側に。

私が抱えている問題は、接続の実際の名前にアクセスすることです。私はjavascriptの初心者であり、さらにd3に新しく、これらのSVG要素の実際の名前にアクセスする方法を理解する上での問題を抱えています。これまではconsole.log（）のコードを2行使っています：

var targetTest = d3.selectAll("path.link.target-" + d.key); 
console.log(targetTest); 

コンソールには、私が望むすべてのSVGオブジェクトのログが表示されますが、すべての要素について完全な情報が得られます。このような何か：

0: SVGPathElement 
__data__: Object 
animatedNormalizedPathSegList: null 
animatedPathSegList: SVGPathSegList 
attributes: NamedNodeMap 
baseURI: "http://localhost/mbostock-d3- 544addb/examples/bundle2/bundle.html" 
childElementCount: 0 
childNodes: NodeList[0] 
className: SVGAnimatedString 
clientHeight: 0 
clientLeft: 0 
clientTop: 0 
clientWidth: 0 
dataset: DOMStringMap 
externalResourcesRequired: SVGAnimatedBoolean 
farthestViewportElement: SVGSVGElement 
firstChild: null 
firstElementChild: null 
id: "" 
lastChild: null 
lastElementChild: null 
localName: "path" 
namespaceURI: "http://www.w3.org/2000/svg" 
nearestViewportElement: SVGSVGElement 
nextElementSibling: SVGPathElement 
nextSibling: SVGPathElement 
nodeName: "path" 
nodeType: 1 
nodeValue: null 
normalizedPathSegList: null 
offsetHeight: 0 
__proto__: SVGPathElement 
length: 1 
parentNode: HTMLDocument 
__proto__: Array[0] 

私がアクセスしようとしているデータの一部は、3つのオブジェクトが含まれているデータ対象、範囲内にあります。そこキーという名前のフィールドがあり、これは、私は基本的に私が電話をかけたい

depth: 4 
imports: Array[9] 
key: "Interpolator" 
name: "flare.animate.interpolate.Interpolator" 
parent: Object 
size: 8746 
x: 40.62256809338521 
y: 180 

にアクセスしたいフィールドです（私がアクセスしようとしています）で、ソースオブジェクト内

source: Object 
target: Object 
__proto__: Object 

、 document.writeを、またはこのキーに似て$（＃番号）の.text（）が、私は、一度に1つの要素にアクセスすることができるように見える、AKA私は

var target = d3.selectAll("path.link.target-" + d.key); 
var source = d3.selectAll("path.link.source-" + d.key); 
var imports = source.property("__data__").target.key; 
var exports = target.property("__data__").source.key; 

が、これらのそれぞれを使用しています私には1つの名前しか与えられず、完全なものになりますリスト。 はAKA私はそれだけで私はのSelectAllを使用していても、一度私に1名を与える複数の「インポート」または「エクスポート」

console.log(imports) 

を持っている場合でも、要素の上に置くと。

ご協力いただければ幸いです。ご質問が少し複雑な場合は申し訳ありませんが、非常に具体的な質問ですので、可能な限り具体的にしようとしましたが、可能であれば詳しく説明しています。とにかく手前にありがとう！彼らは最初の値の代わりに返すすべての値を取得するsourceとtarget変数の

アイザック

Answer 1

使用each。ここで

var targets = d3.selectAll("path.link.target-" + d.key); 
var sources = d3.selectAll("path.link.source-" + d.key); 
var imports = []; 
var exports = []; 
targets.each(function(d) { 
    imports.push(d["source"].key); 
}); 
sources.each(function(d) { 
    exports.push(d["target"].key); 
}); 
console.log("Imports - " + imports); 
console.log("Exports - " + exports); 

はアクションでそれを示すJSFiddleあります。ハイライトが行われているので、上記のコードをmouseover関数に追加しました。舞台裏attrとstyle使用eachよう

D3方法はあなたがする必要はありませんので、しかし、あなたがデータにアクセスするためのカスタム関数を使用しているので、あなたはeachを使用する必要があります。