cómo acceder a los datos de un d3 SVG Element

Question

Así que estoy tratando de hacer mi propia versión de esta visualización magnífico que d3 ha hecho:

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

Todo lo que estoy haciendo es básicamente moviendo todo el gráfico de a la izquierda, y luego tratando de mostrar las diferentes relaciones a la derecha, de modo que cada vez que pase el mouse sobre un nombre a la izquierda, no solo vea los diferentes tipos de conexiones cambiar los colores en el gráfico, también vea los nombres de estas conexiones a la derecha.

El problema que tengo es acceder a los nombres reales de las conexiones. Soy nuevo en javascript y aún más nuevo en d3, y tengo problemas para entender cómo acceder a los nombres reales de estos elementos SVG Hasta ahora lo hago solo en console.log() usando dos líneas de código:

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

En la consola, esto me dará un registro de todos los objetos SVG que quiero, pero me da la información completa para cada uno de los elementos. Algo como esto:

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] 

La parte de los datos que estoy tratando de acceso está dentro del datos objeto, que contiene tres objetos más.

source: Object 
target: Object 
__proto__: Object 

dentro del objeto de origen, (que es lo que estoy tratando de acceso) hay un campo denominado clave, y esto es el campo que quiero acceder

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

Básicamente quiero llamar un document.write o similares $ (# id) .text() en esta clave, pero sólo parecen ser capaces de acceder a un elemento a la vez, también conocido como estoy usando

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; 

pero cada uno de estos solo me dará un nombre, en lugar de un nombre completo lista. También conocido como cuando el cursor sobre un elemento, incluso si tiene múltiples "importaciones" o "exportaciones" de la

console.log(imports) 

sólo me va a dar 1 nombre a la vez, a pesar de que he usado selectAll.

¡Cualquier ayuda sería muy apreciada! Lamento si la pregunta es un poco intrincada, traté de ser lo más específico posible, ya que es una pregunta muy específica, pero es posible que haya entrado en muchos detalles ... si eso es posible. De todos modos, ¡gracias de antemano!

Isaac

Answer 1

Uso each sobre las variables source y target para obtener todos los valores que regresen en lugar de sólo el primer valor.

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); 

Aquí está un JSFiddle que lo muestra en acción. Agregué el código anterior a la función mouseover ya que es donde se realiza el resaltado.

D3 métodos como attr y style uso each detrás de las escenas por lo que no tienen que hacerlo, pero dado que está utilizando una función personalizada para acceder a los datos que tendrán que utilizar each.