d3 retrieve and add to current selection's attribute value

Question

I'm trying to get the values for an element's translation.

For example, if I select the x axis:

d3.select('.x.axis').attr("transform")

then I get

"translate(0,112)"

How do I get the 0 and the 112 without parsing a regexp?

I'm trying to do it so that I can add to the value. In pseudocode:

d3.selectAll('.x.axis').attr('transform', 'translate('
        .attr('transform').match(/(\d+)(\.\d+)?/g)[0] // <-- clearly won't work
        + additional_value
        + ', 0)');

Answer 1

D3 provides the transform() function for exactly this purpose:

var t = d3.transform(d3.select('.x.axis').attr("transform")),
    x = t.translate[0],
    y = t.translate[1];

Answer 2

if you would like to use selectAll you could try something like this:

// move ticks to the center of the x-axis   
var transform;
d3.selectAll('.tick').attr('transform', function(){
  transform = d3.transform(d3.select(this).attr("transform"));
  return "translate("+transform.translate[0]+", -3)";
});