javascript-d3How can I use D3.js to create a tree visualization?

D3.js is a powerful data visualization library that can be used to create a tree visualization. To create a tree visualization using D3.js, the following steps can be taken:

1. Create a div element to hold the tree visualization.

<div id="tree"></div>

2. Include the D3.js library.

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

3. Create a tree layout object using the d3.tree() function.

var tree = d3.tree();

4. Create a root node, and define its children.

var root = {
  "name": "Root",
  "children": [
    {
      "name": "Child 1"
    },
    {
      "name": "Child 2"
    }
  ]
};

5. Format the data into a hierarchical structure using the tree.nodes() and tree.links() functions.

var nodes = tree.nodes(root);
var links = tree.links(nodes);

6. Create SVG elements for the nodes and links.

var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

node.append("circle")
  .attr("r", 10);

node.append("text")
  .attr("dy", ".35em")
  .text(function (d) {
    return d.data.name;
  });

var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal()
    .x(function (d) {
      return d.x;
    })
    .y(function (d) {
      return d.y;
    })
  );

7. Finally, render the tree visualization using the d3.zoom() function.

svg.call(d3.zoom()
  .scaleExtent([1 / 2, 8])
  .on("zoom", zoomed));

function zoomed() {
  node.attr("transform", d3.event.transform);
  link.attr("transform", d3.event.transform);
}

Output example

A tree visualization rendered in the div element with the given data.

Helpful links

• D3.js Documentation
• Tree Visualization Tutorial

Edit this code on GitHub