как получить доступ к данным элемента SVG d3

Поэтому я пытаюсь сделать свою собственную версию этой великолепной визуализации, которую сделал 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]

Часть данных, к которым я пытаюсь получить доступ, находится в объекте data , который содержит еще три объекта.

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;

но каждый из них даст мне только одно имя, а не полный список. AKA, когда я наводил курсор на элемент, даже если он имеет несколько «импортов» или «экспортов»

console.log(imports)

будет давать мне только одно имя за раз, хотя я использовал selectAll.

Любая помощь приветствуется! Извините, если вопрос немного запутанный, я старался быть как можно более конкретным, так как это очень конкретный вопрос, но я, возможно, углубился в подробности... если это возможно. В любом случае спасибо заранее!

Исаак