Question

So I am trying to make my own version of this gorgeous visualization that d3 has done:

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

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.

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:

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

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:

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]

The part of the data I am trying to access is within the data object, which contains three more objects.

source: Object
target: Object
__proto__: Object

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

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

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

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;

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

console.log(imports)

will only give me 1 name at a time, even though I used selectAll.

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!

Isaac

Answer 1

Use each on the source and target variables to get every value that they return instead of just the first value.

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

Here is a JSFiddle showing it in action. I added the above code to the mouseover function since that is where the highlighting is done.

D3 methods like attr and style use each behind the scenes so you don’t have to, but since you are using a custom function to access data you will need to use each.