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

Creating a knowledge graph using d3.js requires knowledge of HTML, CSS, and JavaScript. The following example code block will create a simple graph using the d3.js library.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      .node {
        fill: #999;
      }

      .node:hover {
        fill: #000;
      }

      .link {
        stroke: #999;
        stroke-width: 2px;
      }
    </style>
  </head>
  <body>
    <svg width="600" height="400"></svg>
    <script type="text/javascript">
      var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

      var nodes = [
        { name: "A" },
        { name: "B" },
        { name: "C" },
        { name: "D" },
        { name: "E" },
        { name: "F" }
      ];

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

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

      // Create the node circles.
      var node = svg
        .selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("class", "node")
        .attr("r", 10)
        .attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        });

      // Set the position of the nodes and links.
      var simulation = d3
        .forceSimulation(nodes)
        .force("charge", d3.forceManyBody())
        .force("link", d3.forceLink(links).distance(100))
        .force("x", d3.forceX())
        .force("y", d3.forceY())
        .on("tick", ticked);

      // 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;
          });
      }
    </script>
  </body>
</html>

This code will generate a graph with 6 nodes (A, B, C, D, E, F) and 5 links connecting them. The code uses the d3.js library to create a <svg> element and use it as a canvas for the graph. The nodes and links are defined as an array of objects, and the d3.forceSimulation() function is used to set the position of the nodes and links. The code then uses the ticked() function to update the position of the nodes and links.

Code explanation

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> - This line of code imports the d3.js library.
<style>...</style> - This block of code sets the style of the nodes and links.
var nodes = [...] - This line of code defines an array of objects containing the nodes of the graph.
var links = [...] - This line of code defines an array of objects containing the links of the graph.
var link = svg.selectAll("line").data(links).enter().append("line").attr("class", "link"); - This line of code creates the link lines.
var node = svg.selectAll("circle").data(nodes).enter().append("circle").attr("class", "node").attr("r", 10).attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; }); - This line of code creates the node circles.
var simulation = d3.forceSimulation(nodes).force("charge", d3.forceManyBody()).force("link", d3.forceLink(links).distance(100)).force("x", d3.forceX()).force("y", d3.forceY()).on("tick", ticked); - This line of code sets the position of the nodes and links.
function ticked() {...} - This function updates the position of the nodes and links.

Helpful links

Edit this code on GitHub

More of Javascript D3

See more codes...