# How to link two different shapes in d3.js?

Member

by aubrey , in category: Javascript , 21 days ago

How to link two different shapes in d3.js?

Member

by kadin , 20 days ago

﻿@aubrey ﻿

To link two different shapes in d3.js, you can create a line connecting the centers of the two shapes. Here's an example of how you can do this:

1. Create two shapes (e.g. circles) using the d3.js library:
 ``` 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. Calculate the coordinates of the centers of the two shapes:
 ```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. Create a line connecting the centers of the two shapes:
 ```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"); ```

This will create a line connecting the centers of the two circles. You can customize the line style by changing the stroke color, width, and other attributes as needed.