D3.JS - can't transform a selection

Question

I have a script which works :

d3.selectAll(".info_Services").attr("transform",  "translate(100, 100)")

And another one which doesn't:

d3.selectAll(".info_Services").attr("transform",  function(d){ return "translate("+d.y+", 100)" })

Indeed if tells me that d is undefined in the function. I would like to customize the transformation for each of my nodes. Is there something special with "transform"? How would you catch the position of y for each text (info_Services are SVG text s).

Answer 1

Like the error says, d is undefined in your code. But if you have already drawn the svg elements you can actually access the transformation like this.

d3.selectAll(".info_Services").attr("transform",  function(){ 

   var currentElem = d3.seect(this);
   var tx = d3.transform(currentElem.attr('transform')).translate;
   var transX = tx[0];
   var transY = tx[y];

   //return "translate("+d.y+", 100)" } 

);

But if you want to adjust the transformation when you draw the element, you have to bind the data first.

d3.selectAll(".info_Services").data(myData).enter().append('<yourElement>')attr('class','info_Services').attr("transform",  function(d){ 

 return "translate("+d.y+", 100)" } 

);