How to draw a simple Force-directed graph in D3 Javascript

Whether two nodes are linked or not is determined by the data. In particular, it contains lines such as

{"source":1,"target":0,"value":1}

which tell it which nodes (by index) to link. The indices refer to the list of nodes also given in the data. This data is given to D3 in this block:

var link = svg.selectAll(".link")    .data(graph.links)  .enter().append("line")    .attr("class", "link")    .style("stroke-width", function(d) { return Math.sqrt(d.value); });

So for each element in graph.links, a line will be added. At this point, the line doesn't have a start or end point, so it is not drawn -- only the element is added. Then, while the simulation is running, the start and end points of the lines are set based on the current state of the simulation. This is the code that you have in your question.

The following code would draw two circles and a link between them.

var svg = d3.select("body").append("svg").attr("width", 100).attr("height", 100);svg.append("circle").attr("cx", 10).attr("cy", 10);svg.append("circle").attr("cx", 90).attr("cy", 90);svg.append("line").attr("x1", 10).attr("y1", 10).attr("x2", 90).attr("y2", 90);