comment accéder à des données d'un d3 Élément SVG

Donc je suis en train de faire ma propre version de cette superbe visualisation que d3 a fait:

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

Tout ce que je fais est fondamentalement déplacement de l'ensemble de tableau à gauche, puis tentez d'afficher les différentes relations sur la droite, de sorte que chaque fois que vous passez la souris sur un nom sur la gauche, non seulement vous pouvez voir les différents types de connexions de changer les couleurs sur la carte, vous pouvez également voir les noms de ces connexions sur la droite.

Le problème que j'ai est d'accéder aux noms réels des connexions. Je suis nouveau sur le javascript et même les plus récents de d3, et j'ai du mal à comprendre comment accéder aux noms réels de ces éléments SVG Donc à présent, je suis simplement dans la console.log() à l'aide de deux lignes de code:

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

Dans la console, cela va me donner un journal de tous les objets SVG je veux, mais il me donne le plein d'informations pour chacun des éléments. Quelque chose comme ceci:

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 partie des données que j'essaye d'entrer dans le données objet, qui contient plus de trois objets.

source: Object
target: Object
__proto__: Object

à l'intérieur de l'objet source (qui est ce que j'essaie d'accès) il y a un champ nommé clé, et c'est le domaine que je veux accéder à

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

Fondamentalement, je veux appeler un document.écrire, ou similaire $(#id).texte() sur cette clé, mais je ne semble pas être en mesure d'accéder à un élément à la fois, en l'occurence, je suis en utilisant

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;

mais chacune de ces ne me donner un nom, plutôt qu'une liste complète.
AKA quand j'ai passez la souris sur un élément, même si il a plusieurs "importations" ou "exportations" la

console.log(imports)

ne me donner 1 nom à la fois, même si j'ai utilisé selectAll.

Toute aide serait grandement appréciée! Je suis désolé si la question est un peu compliquée, j'ai essayé d'être aussi précis que possible, puisque c'est une question très précise, mais j'ai peut-être disparu dans trop de détails... si c'est possible. Merci quand même avant de main!

Isaac

OriginalL'auteur Cabbibo | 2012-07-19

  1. 3

    Utilisation each sur le source et target variables pour obtenir toutes les valeurs qu'ils retournent au lieu de simplement la première valeur.

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

    Ici est un JSFiddle le montrant en action. J'ai ajouté le code ci-dessus à la mouseover la fonction qui est la mise en évidence se fait.

    D3 méthodes comme attr et style utilisation each les coulisses de sorte que vous n'avez pas à, mais puisque vous êtes à l'aide d'une fonction personnalisée pour accéder à des données vous aurez besoin d'utiliser each.

    Ce qui est logique, mais quand j'ai essayé de le faire, la console affiche: Uncaught TypeError: Object #<Object> n'a pas de méthode "propriété"
    Essayez imports.push(d["target"].key); à la place. Si cela ne fonctionne pas, essayez d'ajouter un console.log(d) pour voir quels sont les domaines d'd.
    Je suis désolé, mais je ne comprends pas comment les importations.push(d["cible"].la clé); est différent, alors quel est le code déjà? De plus, d est un objet qui comprend les importations, mais j'ai besoin de plus d'importations et d'exportations, ce qui est le plus de ce que ce problème vient de
    Ajout d'un jsfiddle exemple pour montrer ce que je veux dire. Cela devrait montrer clairement l'exemple d'interagir avec les nœuds.
    Merci, Obtenez-le maintenant! désolé de ne pas répondre plus tôt.

    OriginalL'auteur Brant Olsen