how to access data of a d3 SVG Element
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
.
Cabbibo
Updated on June 14, 2022Comments
-
Cabbibo almost 2 years
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