How to link two different shapes in d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var svg = d3.select("body").append("svg")
  .attr("width", 200)
  .attr("height", 200);

var circle1 = svg.append("circle")
  .attr("cx", 50)
  .attr("cy", 50)
  .attr("r", 20);

var circle2 = svg.append("circle")
  .attr("cx", 150)
  .attr("cy", 150)
  .attr("r", 20);

1
2
3
4
5
6
7
8
9

var center1 = {
  x: parseFloat(circle1.attr("cx")) + parseFloat(circle1.attr("r")),
  y: parseFloat(circle1.attr("cy")) + parseFloat(circle1.attr("r"))
};

var center2 = {
  x: parseFloat(circle2.attr("cx")) + parseFloat(circle2.attr("r")),
  y: parseFloat(circle2.attr("cy")) + parseFloat(circle2.attr("r")
};

1
2
3
4
5
6

var line = svg.append("line")
  .attr("x1", center1.x)
  .attr("y1", center1.y)
  .attr("x2", center2.x)
  .attr("y2", center2.y)
  .style("stroke", "black");