Accessing d3.js element attributes from the datum?

Question

I'm trying to access the cx & cy attributes of some specific svg circles which i have already drawn to the screen using d3.js's .data() function, can anyone help out? The code that's trying to access it is below.

d3.selectAll(".mynode").each( function(d, i){   if(d.someId == targetId){     console.log( d.attr("cx") );    // just trying to demo my point, doesn't work   } } 

I'm quite new to d3.js & javascript, so i'm not sure if i'm approaching this back to front anyways or perhaps i may have missed an inbuilt solution?

Answer 1

Your code is trying to get an svg attribute from an item of data, when what you really want is to get that attribute from the svg DOM element, as in:

console.log(d3.selectAll(".mynode").attr("cx")); 

This will only give you the attribute for the first non-null element of your selection; You can also filter your selection to get the DOM element you are looking for:

console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx")); 

Or, if you'd like to access the attributes of all selected elements, use this in your each function:

d3.selectAll(".mynode").each( function(d, i){   if(d.someId == targetId){     console.log( d3.select(this).attr("cx") );   } } 

Answer 2

There is even simpler way: (providing index i is given)

d3.selectAll("circle")[0][i].attributes.cx.value 

as it can be seen here.