d3 transform translate only the second parameter

Question

Is there a way to select after the initial creation of ag element only the second transform value and modify it?

I want to do something like:

d3.select(".class")
    .attr("transform", 'translate(' + _ + ', ' + 0 + ')');

Where the first param (the '_') is untouched and only second is modified to 0.

Is this possible after the g class creation?

Thanks

Answer 1

Yes you can do this, the code below shows how I am adding a translate to the g group on clicking of the button: (I have added comments for you to get a better picture of the code)

  //making ag group with in the circle var myG = d3.select("body").append("svg").attr("width", 500).attr("height", 500).append("g"); //appending a circle to the g group. myG.append("circle").attr("cy", 60).attr("cx", 60).attr("r",10); var xTrans = 0; d3.select("#click").on("click", function() { xTrans+=20; //applying transform to g. myG.attr("transform", "translate("+xTrans+",0)") }); 

 circle{ fill:steelblue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <button id="click">ClickToAddTransition</button>