wie den Zugriff auf Daten eines d3 SVG-Element

So, ich bin versucht, meine eigene version dieses wunderschöne Visualisierung, d3 getan hat:

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

Alles was ich Tue, ist im Grunde bewegen sich die ganze Grafik auf der linken Seite, und dann zu versuchen, zeigen die unterschiedlichen Beziehungen, die auf Recht, so dass jedes mal, wenn Sie den Mauszeiger über einen Namen auf der linken Seite, nicht nur tun, Sie sehen, die verschiedenen Arten von verbindungen ändern der Farben auf dem chart sehen Sie auch die Namen dieser Anschlüsse auf der rechten Seite.

Das problem ich habe, ist der Zugriff auf die tatsächlichen Namen der verbindungen. Ich bin neu in javascript und auch neuere bis d3, und habe Probleme, mich zu verstehen, wie Zugriff auf den eigentlichen Namen dieser SVG-Elemente So weit, ich mache es nur in der Konsole.log() über die zwei code-Zeilen:

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

In der Konsole dies gibt mir ein Protokoll aller SVG-Objekte, die ich will, aber es gibt mir die volle information für jedes der Elemente. So etwas wie dieses:

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]

Den Teil der Daten, die ich versuche zuzugreifen, ist innerhalb der Daten - Objekt, das enthält drei weitere Objekte.

source: Object
target: Object
__proto__: Object

innerhalb der source Objekt, (das ist, was ich versuche, access) gibt es ein Feld namens key, und das ist der Bereich den ich zugreifen will,

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

Grundsätzlich möchte ich aufrufen, ein Dokument.schreiben, oder ähnliches $("#id).text() dieser Taste, aber ich scheinen in der Lage sein, um den Zugriff auf ein element in einer Zeit, AKA ich bin mit 

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;

aber jeder von diesen wird nur geben Sie mir einen Namen, dann eher eine vollständige Liste.
AKA, wenn ich den Mauszeiger über ein element, auch wenn es mehrere "Einfuhr" oder "Ausfuhr" die 

console.log(imports)

wird, gebt mir nur 1 name zu einer Zeit, obwohl ich früher selectAll.

Jede Hilfe wäre sehr geschätzt werden! Tut mir Leid, wenn die Frage ist ein bisschen kompliziert, ich habe versucht, so genau wie möglich, da es eine sehr spezifische Frage, aber vielleicht bin ich gegangen in zu viel detail... wenn das möglich ist. Trotzdem danke, bevor die hand!

Isaac

InformationsquelleAutor Cabbibo | 2012-07-19
  1. 3

    Verwenden each auf die source und target Variablen, um jeden Wert, den Sie zurückgeben, anstatt nur den ersten Wert.

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

    Hier ist ein JSFiddle zeigt es in Aktion. Ich habe den oben genannten code, um die mouseover Funktion, da das ist, wo die Markierung erfolgt ist.

    D3 Methoden wie attr und style verwenden each hinter den kulissen, so dass Sie nicht haben, aber da Sie verwenden eine benutzerdefinierte Funktion, um auf Daten zuzugreifen, die Sie benötigen, um each.

    • Das macht Sinn, aber wenn ich versuchte, es zu tun, die Konsole zeigt: "Uncaught TypeError: Object #<Object> hat keine Methode "Eigentum"
    • Versuchen imports.push(d["target"].key); statt. Wenn das nicht funktioniert, versuchen Sie, ein console.log(d) um zu sehen, welche Felder d hat.
    • Tut mir Leid, aber ich verstehe nicht, wie die Importe.push(d["Ziel"].- Schlüssel); ein anderer ist, dann was ist der code bereits? Auch d ist ein Objekt, das enthält die Einfuhren, aber ich brauche mehr Importe und Exporte, die meisten von was dieses problem kommen wird
    • Hinzugefügt ein jsfiddle Beispiel, um zu zeigen, was ich meine. Dies sollte ein klares Beispiel der Interaktion mit den Knoten.
    • Danke Erhalten Sie es jetzt! sorry für die nicht früher reagiert.
    • Die URL, um D3 in deinem JSFiddle noch mehr vorhanden; ich habe eine korrigierte version http://jsfiddle.net/76h3svsp/.

    InformationsquelleAutor Brant Olsen
Schreibe einen Kommentar