我正在使用D3.tree和D3.hierarchy创建家谱。我知道最好将每个子节点设置为只有1个父节点,但是我觉得D3可以实现这一点,我只是不知道该怎么做。
This is my current example我正在从family.json
提取数据。无论如何,我都可以重构数据,但不确定如何。
family.json
{
"data": {
"id": "Adam"
},
"children": [
{
"data": {
"id": "Wayne"
},
"children": [
{
"data": {
"id": "Kenneth"
},
"children": [
{
"data": {
"id": "Arthur"
},
"children": [
{
"data": {
"id": "Ira"
},
...
index.js
json('family.json')
.then(data => {
const root = hierarchy(data);
const links = treeLayout(root).links()
const linkPathGenerator = linkHorizontal()
.x(d => d.y)
.y(d => d.x)
g.selectAll('path').data(links)
.enter().append('path')
// d is a path string based on each one of our links
.attr('d', linkPathGenerator)
g.selectAll('text').data(root.descendants())
.enter().append('text')
.attr('x', d => d.y)
.attr('y', d => d.x)
.attr('dy', '0.32em')
.attr('text-anchor', d => d.children ? 'middle' : 'start')
.text(d => d.data.data.id);