如何访问d3 SVG元素的数据
所以我正在尝试制作我自己的d3版本的这种华丽的可视化版本：
http://mbostock.github.com/d3/talk/20111116/bundle.html
我所做的只是将整个图表向左移动，然后尝试在右侧显示不同的关系，因此每次将鼠标悬停在左侧的名称上时，不仅会看到不同类型的连接会改变颜色图表中，您还可以看到右侧的这些连接的名称。
我遇到的问题是访问连接的实际名称。 我是新来的JavaScript，甚至更新的D3，并有理解如何访问这些SVG元素的实际名称的问题到目前为止，我只是在console.log（）通过使用两行代码：
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]
我尝试访问的部分数据位于数据对象内，其中包含三个以上的对象。
source: Object
target: Object
__proto__: Object
在源对象内（这是我正在尝试访问的内容），有一个名为key的字段，这是我想要访问的字段
depth: 4
imports: Array[9]
key: "Interpolator"
name: "flare.animate.interpolate.Interpolator"
parent: Object
size: 8746
x: 40.62256809338521
y: 180
基本上我想调用一个document.write或类似的$（＃id）.text（）这个键，但我似乎只能够访问一个元素，我正在使用
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;
但每一个只会给我一个名字，而不是一个完整的名单。 当我将鼠标悬停在某个元素上时，即使它具有多个“导入”或“导出”
console.log(imports)
一次只会给我1个名字，即使我使用了selectAll。
任何帮助将非常感激！ 如果问题有点复杂，我很抱歉，我试图尽可能具体，因为这是一个非常具体的问题，但我可能会详细说明......如果可能的话。 无论如何，先谢谢了！
艾萨克
使用each对source和target变量，让每一个他们返回，而不是仅仅的第一个值的值。
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函数中，因为这是突出显示完成的地方。
D3的方法，如attr和style使用each幕后，这样你就不必了，但因为你正在使用自定义功能来访问数据，你需要使用each 。