javascript-d3How can I create a graph network using d3.js?

Creating a graph network using d3.js is relatively straightforward. The following example code block will create a simple graph network with nodes and links:

// Create a graph network
var nodes = [
  {id: "node-1"},
  {id: "node-2"},
  {id: "node-3"}
];

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

var width = 600;
var height = 400;

// Create a force simulation
var simulation = d3.forceSimulation(nodes)
  .force("charge", d3.forceManyBody().strength(-200))
  .force("link", d3.forceLink(links).distance(150))
  .force("center", d3.forceCenter(width / 2, height / 2))
  .on("tick", ticked);

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

// Create links
var link = svg.selectAll(".link")
  .data(links)
  .enter().append("line")
  .attr("class", "link");

// Create nodes
var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5);

// Tick function
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 code will generate a graph network with three nodes and two links connecting them. The code consists of the following parts:

1. Declaring the nodes and links of the graph network.
2. Setting the width and height of the network.
3. Creating a force simulation to determine the position of the nodes.
4. Creating an SVG element to draw the graph.
5. Drawing the links between the nodes.
6. Drawing the nodes.
7. Ticking the simulation to update the position of the nodes and links.

For more information on creating graph networks with d3.js, check out the d3.js documentation or the d3.js examples.

Edit this code on GitHub