CODEWITHSUNDEEP
javascriptd3.jssvg
alxyzc
alxyzc

Reputation: 1051

d3.js -- line connecting two transformed svg elements

I created an array of small circles (dots) laid on a circumference of a larger circle in a loop, with each iteration I rotate the same dot with the same cx and cy by a different angle using transform=rotate(i*angle,0,0).

Now I want to connect a line between two of the dots, but since each dot has the same cx and cy, my naive way of passing in the cx and cy of the two dots as coordinates doesn't seem to work.

Strangely on JSFiddle, half of the line is shown, even though the line's x0 == x1 and y0 == y1: https://jsfiddle.net/8wn30vqn/1/

What is a good way of obtaining the coordinates of a transformed svg element so I can pass them into the line? Or is there some other way I can connect two elements with a line?

Upvotes: 0

Views: 518

Answers (1)

Nixie
Nixie

Reputation: 637

The good way would be to take transformation matrix from each of your small circles and apply it to the same point to get new point (and then connect these new points).

var svgNode = d3circle.node();
var matrix = svgNode.transform.baseVal.consolidate().matrix;

var pt = svgNode.ownerSVGElement.createSVGPoint();
pt.x = 0;
pt.y = 0;
var transformedPoint = pt.matrixTransform(matrix);
... use transformedPoint to create line

Upvotes: 1

Related Questions