Bahador Saket Bahador Saket - 6 months ago 29
jQuery Question

How to convert pixel to translate value in d3?

I have a g element that I am trying to put on a top of my circle element by giving the cx and cy position of the circle to g element. However, this does not work because the g uses translate. Any idea how to convert pixel to translate?

colorPickerX = d3.select(dataPointId).attr("cx");
colorPickerY = d3.select(dataPointId).attr("cy");
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300)
.append("g")
.attr("transform", "translate("+colorPickerX+","+colorPickerX+")"); \\This is wrong because Cx and Cy are Pixels

Answer

Do this using parseFloat:

//parseFloat will get the number and ignore the px in the end.
colorPickerX = parseFloat(d3.select(dataPointId).attr("cx"));
colorPickerY = parseFloat(d3.select(dataPointId).attr("cy"));

Then use it to translate the g group as you doing above.