All geek questions in one place

How to draw lines between circles?

I am trying to draw three circles and draw related lines between each of these circles.

The ultimate goal is to configure which circles are connected using the json configuration, but before that im just trying to connect circles using callbacks and hard code values.

Here is what I still have:

<!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body style="overflow: hidden;"> <div id="canvas" style="overflow: hidden;"></div> <script type="text/javascript"> var graph = { "nodes":[ {"name":"1","group":1, "x" : 100, "y" : 100 , r : 20}, {"name":"2","group":1, "x" : 200, "y" : 150 ,r : 30}, {"name":"3","group":2 , "x" : 300, "y" : 250 , r : 50} ], "links":[ {"source":1,"target":0,"value":1} ] } var width = 2000; var height = 500; var svg = d3.select("#canvas").append("svg") .attr("width", width) .attr("height", height) .append("g"); var lines = svg.attr("class", "line") .selectAll("line").data(graph.links) .enter().append("line") .attr("x1", function(d) { return 50 }) .attr("y1", function(d) { return 50 }) .attr("x2", function(d) { return 100 }) .attr("y2", function(d) { return 100 }) var circles = svg.selectAll("circle") .data(graph.nodes) .enter().append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", function(d, i){ return dr }) .attr("cx", function(d, i){ return dx }) .attr("cy", function(d, i){ return dy }) </script> </body> </html>

But the lines are not drawn. Each circle must contain one line connecting it to another circle. I just hard code the coordinates x1, y1, x2, y2, but I will use the coordinates of other circles to determine the positions of the lines. Why are no lines drawn? Are there any standard d3 methods that I should use to connect these circles?

script: http://jsfiddle.net/zzz8svuq/10/

Update:

Here is the updated code that draws the connected lines between the circles as configured in the dataset graph.nodes:

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body style="overflow: hidden;"> <div id="canvas" style="overflow: hidden;"></div> <script type="text/javascript"> var graph = { "nodes": [ {name: "1", "group": 1, x: 100, y: 50, r: 10 , connected : "2"}, {name: "2", "group": 1, x: 200, y: 90, r: 15, connected : "1"}, {name: "3", "group": 2, x: 300, y: 230, r: 25, connected : "1"} ] } $( document ).ready(function() { var width = 2000; var height = 500; var svg = d3.select("#canvas").append("svg") .attr("width", width) .attr("height", height) .append("g"); var lines = svg.attr("class", "line") .selectAll("line").data(graph.nodes) .enter().append("line") .style("stroke", "gray") // <<<<< Add a color .attr("x1", function (d, i) { return dx }) .attr("y1", function (d) { return dy }) .attr("x2", function (d) { return findAttribute(d.connected).x }) .attr("y2", function (d) { return findAttribute(d.connected).y }) var circles = svg.selectAll("circle") .data(graph.nodes) .enter().append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", function (d, i) { return dr }) .attr("cx", function (d, i) { return dx }) .attr("cy", function (d, i) { return dy }); }); function findAttribute(name) { for (var i = 0, len = graph.nodes.length; i < len; i++) { if (graph.nodes[i].name === name) return graph.nodes[i]; // Return as soon as the object is found } return null; // The object was not found } </script> </body> </html>
+5
source share
1 answer

You need to make sure that the lines are the color of the stroke, otherwise they will be white and you will not be able to see them.

  var lines = svg.attr("class", "line") .selectAll("line").data(graph.links) .enter().append("line") .style("stroke", "gray") // <<<<< Add a color .attr("x1", function(d) { return 50 }) .attr("y1", function(d) { return 50 }) .attr("x2", function(d) { return 100 }) .attr("y2", function(d) { return 100 })
+6
source

Source: https://habr.com/ru/post/1203078/

More articles:


All Articles