javascript-d3How do I create a force directed graph using d3.js?

Creating a force directed graph with d3.js is a simple process. First, you need to include the d3 library in your HTML file:

<script src="https://d3js.org/d3.v5.min.js"></script>

Then, you need to define the size of the SVG element that will contain the graph:

var width = 960;
var height = 500;

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

Next, you need to define the force simulation and the nodes and links that will be used in the graph:

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

var nodes = [
    {id: 0, name: "Node A"},
    {id: 1, name: "Node B"},
    {id: 2, name: "Node C"}
];

var links = [
    {source: 0, target: 1},
    {source: 1, target: 2},
    {source: 2, target: 0}
];

Then, you need to add the nodes and links to the force simulation:

var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .attr("stroke-width", 2);

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("r", 10)
    .attr("fill", "steelblue")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

simulation
    .nodes(nodes)
    .on("tick", ticked);

simulation.force("link")
    .links(links);

Finally, you need to define the tick function that will be used to update the position of the nodes and links:

function ticked() {
  link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

This will create a force directed graph with three nodes and three links.

Code Parts

• <script src="https://d3js.org/d3.v5.min.js"></script> - This line of code includes the d3 library in the HTML file.

• var width = 960; var height = 500; - These two lines of code define the width and height of the SVG element that will contain the graph.

• var svg = d3.select("body").append("svg") - This line of code creates an SVG element and appends it to the body of the HTML file.

• var simulation = d3.forceSimulation() - This line of code creates a force simulation object.

• var nodes = [...] and var links = [...] - These two lines of code define the nodes and links that will be used in the graph.

• simulation.nodes(nodes).on("tick", ticked) and simulation.force("link").links(links) - These two lines of code add the nodes and links to the force simulation.

• function ticked() { ... } - This function is used to update the position of the nodes and links in the graph.

Relevant Links

• D3.js Documentation
• Force Directed Graph Tutorial

Edit this code on GitHub