D3.js v5.0 树图（一）

最新推荐文章于 2024-07-23 14:59:06 发布

哈利路亚阿弥陀佛么么哒

最新推荐文章于 2024-07-23 14:59:06 发布

阅读量3.1k

点赞数

分类专栏： D3.js 文章标签： d3.js 树图数据可视化

D3.js 专栏收录该内容

23 篇文章 7 订阅

订阅专栏

本文介绍了如何使用D3.js v5.0库创建树枝状树图，详细讲解了数据结构及其在可视化过程中的应用。

摘要由CSDN通过智能技术生成

树图主要有两种：树枝状的树图与矩阵树图。
本节描述树枝状的树图

在这里插入图片描述
数据结构：

{
  "name": "flare",
  "children": [
    {
      "name": "",
      "children": [
        {
          "name": "",
          "children": [
            {
              "name": "",
              "value": 3938
            },
          ]
        },
      ]
    }
  ]
}

import * as d3 from 'd3';

export default function treeChart(id, dataset) {
  const width = 900;
  const height = 500;
  const svg = d3
    .select(id)
    .append('svg')
    .attr('width', width)
    .attr('height', height);
  const tree = data => {
    const root = d3.hierarchy(data);
    root.dx = 10;
    root.dy = width / (root.height + 1);
    return d3.tree().nodeSize([root.dx, root.dy])(root);
  };
  const root = tree(dataset);
  let x0 = Infinity;
  let x1 = -x0;
  root.each(d => {
    if (d.x > x1) x1 = d.x;
    if (d.x < x0) x0 = d.x;
  });
  const g = svg
    .append('g')
    .attr('font-family', 'sans-serif')
    .attr('font-size', 10)
    .attr('transform', `translate(${root.dy / 3},${root.dx - x0})`);

  g.append('g')
    .attr('fill', 'none')
    .attr('stroke', '#555')
    .attr('stroke-opacity', 0.4)
    .attr('stroke-width', 1.5)
    .selectAll('path')
    .data(root.links())
    .join('path')
    .attr(
      'd',
      d3
        .linkHorizontal()
        .x(d => d.y)
        .y(d => d.x)
    );

  const node = g
    .append('g')
    .attr('stroke-linejoin', 'round')
    .attr('stroke-width', 3)
    .selectAll('g')
    .data(root.descendants())
    .join('g')
    .attr('transform', d => `translate(${d.y},${d.x})`);

  node
    .append('circle')
    .attr('fill', d => (d.children ? '#555' : '#999'))
    .attr('r', 2.5);

  node
    .append('text')
    .attr('dy', '0.31em')
    .attr('x', d => (d.children ? -6 : 6))
    .attr('text-anchor', d => (d.children ? 'end' : 'start'))
    .text(d => d.data.name)
    .clone(true)
    .lower()
    .attr('stroke', 'white');
}