树图主要有两种:树枝状的树图与矩阵树图。
本节描述树枝状的树图
数据结构:
{
"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');
}