使用D3树将兄弟姐妹和其他后代添加到层次族树中

时间:2019-01-18 22:32:21

标签: javascript d3.js svg tree hierarchy

我正在使用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);

0 个答案:

没有答案