come accedere ai dati di un d3 SVG Element

Question

Così sto cercando di fare la mia versione di questo splendido visualizzazione che d3 ha fatto:

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

Tutto quello che sto facendo è fondamentalmente spostando l'intero grafico a a sinistra, quindi cercando di visualizzare le diverse relazioni a destra, così ogni volta che si passa con il mouse su un nome a sinistra, non solo si vedono i diversi tipi di connessioni che cambiano i colori sul grafico, ma si vedono anche i nomi di queste connessioni sulla destra.

Il problema che sto avendo è l'accesso ai nomi effettivi delle connessioni. Sono nuovo di javascript e ancora più recente di d3, e sto avendo problemi a capire come accedere ai nomi effettivi di questi elementi SVG Finora lo sto facendo solo in console.log() utilizzando due righe di codice:

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

Nella console questo mi fornirà un registro di tutti gli oggetti SVG che desidero, ma mi fornisce l'informazione completa per ciascuno degli elementi. Qualcosa di simile a questo:

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 dei dati che sto cercando di accesso è all'interno del data oggetto, che contiene più di tre oggetti.

source: Object 
target: Object 
__proto__: Object 

all'interno dell'oggetto di origine, (che è quello che sto cercando di accesso) v'è un campo chiave denominata, e questo è il campo che voglio accedere

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

Fondamentalmente io voglio chiamare un document.write, o simili $ (# id) .text() su questo tasto, ma mi sembra solo di essere in grado di accedere a un elemento alla volta, AKA sto 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; 

ma ognuno di questi mi darà solo un nome, piuttosto un pieno elenco. AKA quando il mouse sopra un elemento, anche se ha più "importazioni" o "esportazioni" il

console.log(imports) 

servirà solo a darmi 1 nome alla volta, anche se ho usato selectAll.

Qualsiasi aiuto sarebbe molto apprezzato! Mi dispiace se la domanda è un po 'complicata, ho cercato di essere il più specifico possibile, dal momento che si tratta di una domanda molto specifica, ma potrei aver approfondito molti dettagli ... se possibile. Comunque grazie prima mano!

Isaac

Answer 1

Usa each sulle variabili source e target di ottenere ogni valore che ritornano invece di solo il primo valore.

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

Ecco un JSFiddle mostrarlo in azione. Ho aggiunto il codice sopra alla funzione mouseover poiché è qui che viene eseguita l'evidenziazione.

D3 metodi come attr e style uso each dietro le quinte, in modo da non devono, ma dal momento che si sta utilizzando una funzione personalizzata per accedere ai dati sarà necessario utilizzare each.