title: how to access data of a d3 SVG Element
body: <p>So I am trying to make my own version of this gorgeous visualization that d3 has done:</p>
  
  <p><a href="http://mbostock.github.com/d3/talk/20111116/bundle.html" rel="noreferrer">http://mbostock.github.com/d3/talk/20111116/bundle.html</a></p>
  
  <p>All I am doing is basically moving the entire chart to the left, and then trying to display the different relationships on right, so every time you hover over a name on the left, not only do you see the different types of connections change colors on the chart, you also see the names of these connections on the right. </p>
  
  <p>The problem I am having is accessing the actual names of the connections. I am new to javascript and even newer to d3, and am having problems understanding how to access the actual names of these SVG elements Thus far I am doing it just in the console.log() by using two lines of code:</p>
  
  <pre><code>var targetTest = d3.selectAll("path.link.target-" + d.key);
  console.log(targetTest);
  </code></pre>
  
  <p>In the console this will give me a log of all the SVG objects I want, but it gives me the full information for every one of the elements. Something like this:</p>
  
  <pre><code>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]
  </code></pre>
  
  <p>The part of the data I am trying to access is within the <strong>data</strong> object, which contains three more objects.</p>
  
  <pre><code>source: Object
  target: Object
  __proto__: Object
  </code></pre>
  
  <p>within the source object, (which is what I am trying to access) there is a field named key, and this is the field I want to access</p>
  
  <pre><code>depth: 4
  imports: Array[9]
  key: "Interpolator"
  name: "flare.animate.interpolate.Interpolator"
  parent: Object
  size: 8746
  x: 40.62256809338521
  y: 180
  </code></pre>
  
  <p>Basically I want to call a document.write, or similar $(#id).text() on this key, but I only seem to be able to access one element at a time, AKA I am using </p>
  
  <pre><code>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;
  </code></pre>
  
  <p>but each of these will only give me one name, rather then a full list.
  AKA when I hover over an element, even if it has multiple "imports" or "exports" the </p>
  
  <pre><code>console.log(imports)
  </code></pre>
  
  <p>will only give me 1 name at a time, even though I used selectAll. </p>
  
  <p>Any help would be much appreciated! I'm sorry if the question is a bit convoluted, I tried to be as specific as possible, since it is a very specific question, but I may have gone into to much detail... if that is possible. Anyway thanks before hand!</p>
  
  <p>Isaac</p>