【问题标题】:How to convert my data into a format suitable for d3.js sunburst?如何将我的数据转换为适合 d3.js sunburst 的格式?
【发布时间】:2019-10-30 10:11:21
【问题描述】:

我有这样的数据:https://jsfiddle.net/L79wjn0x/,我想将它转换成这种格式https://jsfiddle.net/49n1jmL5/。我正在尝试使用d3.nest 方法来更改格式但无法使其正常工作。在我的数据中,孩子通过父母的ID与父母联系起来。

我拥有的示例数据如下所示。孩子与父母联系在一起 通过父母的 id 是孩子的parent_id 键是相同的 父母的身份证钥匙。

 [{
    "id": 1,
    "name": "ab",
    "parent_id": null,
    "value": 120,
    "tree_level": 1
  },
  {
    "id": 2,
    "name": "ac",
    "parent_id": null,
    "value": 110,
    "tree_level": 1
  } {
    "id": 3,
    "name": "abc",
    "parent_id": 1,
    "value": 30,
    "tree_level": 2
  },
  {
    "id": 4,
    "name": "abcd",
    "parent_id": 1,
    "value": 90,
    "tree_level": 2
  },
  {
    "id": 5,
    "name": "abc",
    "parent_id": 3,
    "value": 10,
    "tree_level": 3
  },
  {
    "id": 6,
    "name": "abc",
    "parent_id": 3,
    "value": 20,
    "tree_level": 3
  }
]

我希望将上面的 json 格式转换成下面的格式。 谁能引导我正确的方式

{
  "id": 1,
  "name": "ab",
  "parent_id": null,
  "value": 120,
  "tree_level": 1,
  children: [{
      "id": 3,
      "name": "abc",
      "parent_id": 1,
      "value": 30,
      "tree_level": 2
      children: [{
          "id": 5,
          "name": "abc",
          "parent_id": 3,
          "value": 10,
          "tree_level": 3
        },
        {
          "id": 6,
          "name": "abc",
          "parent_id": 3,
          "value": 20,
          "tree_level": 3
        }
      ]
    },
    {
      "id": 4,
      "name": "abcd",
      "parent_id": 1,
      "value": 90,
      "tree_level": 2,
      children: []
    }
  ]
}, {
  "id": 2,
  "name": "ac",
  "parent_id": null,
  "value": 110,
  "tree_level": 1,
  children: []
}

以下是我为转换而编写的代码,但它对我不起作用。 它不是在内部创建孩子,而是在外部创建它。

var nested = d3.nest()
  .key(function(d) {
    if (d.parent_id === null)
      return d;
  }).rollup(function(ele) {
    return ele.map(function(c) {
      return {
        "id": c.id,
        "parent_id": c.parent_id,
        "name": c.name,
        "logValue": c.logValue,
        "tree_level": c.tree_level
      };
    });
  }).entries(this.dataset);
console.log(nested)

d3.nest() 会工作还是我需要别的东西?

【问题讨论】:

  • 请格式化您的代码和文本
  • 好的。我现在已经完成了。现在有用吗?
  • 你的数据和代码肯定有缩进
  • 所以 d3.nest 会帮助我,或者我必须使用名为 undescore.js 的东西来更改 @Bravo 的格式?
  • @Amir 您需要使用 d3 还是可以使用递归函数?

标签: javascript arrays json d3.js sunburst-diagram


【解决方案1】:

要将这些数据传递给d3.partition(),您将使用它来创建旭日形,您只需要d3.stratify。在你的情况下:

const stratify = d3.stratify()
  .parentId(function(d) {
    return d.parent_id;
  });

const hierarchicalData = stratify(data);

这是演示(使用浏览器的控制台查看对象,而不是 S.O. sn-p 的):

const data = [{
    "id": 131567,
    "name": "cellular organisms",
    "tree_level": 1,
    "display_order": 2,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": null
  },
  {
    "id": 2759,
    "name": "Eukaryota",
    "tree_level": 2,
    "display_order": 5,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 131567
  },
  {
    "id": 33154,
    "name": "Opisthokonta",
    "tree_level": 3,
    "display_order": 49,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 2759
  }, {
    "id": 33208,
    "name": "Metazoa",
    "tree_level": 4,
    "display_order": 126,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 33154
  }, {
    "id": 6072,
    "name": "Eumetazoa",
    "tree_level": 5,
    "display_order": 227,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 33208
  }, {
    "id": 33213,
    "name": "Bilateria",
    "tree_level": 6,
    "display_order": 547,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 6072
  }, {
    "id": 33511,
    "name": "Deuterostomia",
    "tree_level": 7,
    "display_order": 950,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 33213
  }, {
    "id": 7711,
    "name": "Chordata",
    "tree_level": 8,
    "display_order": 1639,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 33511
  }, {
    "id": 89593,
    "name": "Craniata",
    "tree_level": 9,
    "display_order": 3042,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 7711
  }, {
    "id": 7742,
    "name": "Vertebrata",
    "tree_level": 10,
    "display_order": 3614,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 89593
  }, {
    "id": 7776,
    "name": "Gnathostomata",
    "tree_level": 11,
    "display_order": 4245,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 7742
  }, {
    "id": 117570,
    "name": "Teleostomi",
    "tree_level": 12,
    "display_order": 4684,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 7776
  }, {
    "id": 117571,
    "name": "Euteleostomi",
    "tree_level": 13,
    "display_order": 4994,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 117570
  }, {
    "id": 8287,
    "name": "Sarcopterygii",
    "tree_level": 14,
    "display_order": 5175,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 117571
  }, {
    "id": 1338369,
    "name": "Dipnotetrapodomorpha",
    "tree_level": 15,
    "display_order": 5787,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 8287
  }, {
    "id": 32523,
    "name": "Tetrapoda",
    "tree_level": 16,
    "display_order": 5945,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 1338369
  }, {
    "id": 32524,
    "name": "Amniota",
    "tree_level": 17,
    "display_order": 6322,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 32523
  }, {
    "id": 40674,
    "name": "Mammalia",
    "tree_level": 18,
    "display_order": 6556,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 32524
  }, {
    "id": 32525,
    "name": "Theria",
    "tree_level": 19,
    "display_order": 6705,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 40674
  }, {
    "id": 9347,
    "name": "Eutheria",
    "tree_level": 20,
    "display_order": 6882,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 32525
  }, {
    "id": 1437010,
    "name": "Boreoeutheria",
    "tree_level": 21,
    "display_order": 7254,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18314,
    "parent_id": 9347
  }, {
    "id": 314145,
    "name": "Laurasiatheria",
    "tree_level": 22,
    "display_order": 7469,
    "has_data": "N",
    "is_leaf": "N",
    "value": 48,
    "parent_id": 1437010
  }, {
    "id": 314146,
    "name": "Euarchontoglires",
    "tree_level": 22,
    "display_order": 7470,
    "has_data": "N",
    "is_leaf": "N",
    "value": 18281,
    "parent_id": 1437010
  }, {
    "id": 9443,
    "name": "Primates",
    "tree_level": 23,
    "display_order": 7575,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17686,
    "parent_id": 314146
  }, {
    "id": 33554,
    "name": "Carnivora",
    "tree_level": 23,
    "display_order": 7598,
    "has_data": "N",
    "is_leaf": "N",
    "value": 11,
    "parent_id": 314145
  }, {
    "id": 91561,
    "name": "Cetartiodactyla",
    "tree_level": 23,
    "display_order": 7629,
    "has_data": "N",
    "is_leaf": "N",
    "value": 37,
    "parent_id": 314145
  }, {
    "id": 314147,
    "name": "Glires",
    "tree_level": 23,
    "display_order": 7675,
    "has_data": "N",
    "is_leaf": "N",
    "value": 741,
    "parent_id": 314146
  }, {
    "id": 9845,
    "name": "Ruminantia",
    "tree_level": 24,
    "display_order": 7760,
    "has_data": "N",
    "is_leaf": "N",
    "value": 16,
    "parent_id": 91561
  }, {
    "id": 9989,
    "name": "Rodentia",
    "tree_level": 24,
    "display_order": 7762,
    "has_data": "N",
    "is_leaf": "N",
    "value": 741,
    "parent_id": 314147
  }, {
    "id": 35497,
    "name": "Suina",
    "tree_level": 24,
    "display_order": 7776,
    "has_data": "N",
    "is_leaf": "N",
    "value": 21,
    "parent_id": 91561
  }, {
    "id": 376913,
    "name": "Haplorrhini",
    "tree_level": 24,
    "display_order": 7857,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17686,
    "parent_id": 9443
  }, {
    "id": 379584,
    "name": "Caniformia",
    "tree_level": 24,
    "display_order": 7859,
    "has_data": "N",
    "is_leaf": "N",
    "value": 11,
    "parent_id": 33554
  }, {
    "id": 9655,
    "name": "Mustelidae",
    "tree_level": 25,
    "display_order": 7931,
    "has_data": "N",
    "is_leaf": "N",
    "value": 11,
    "parent_id": 379584
  }, {
    "id": 9821,
    "name": "Suidae",
    "tree_level": 25,
    "display_order": 7938,
    "has_data": "N",
    "is_leaf": "N",
    "value": 21,
    "parent_id": 35497
  }, {
    "id": 35500,
    "name": "Pecora",
    "tree_level": 25,
    "display_order": 7956,
    "has_data": "N",
    "is_leaf": "N",
    "value": 16,
    "parent_id": 9845
  }, {
    "id": 314293,
    "name": "Simiiformes",
    "tree_level": 25,
    "display_order": 8029,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17686,
    "parent_id": 376913
  }, {
    "id": 1963758,
    "name": "Myomorpha",
    "tree_level": 25,
    "display_order": 8054,
    "has_data": "N",
    "is_leaf": "N",
    "value": 741,
    "parent_id": 9989
  }, {
    "id": 9479,
    "name": "Platyrrhini",
    "tree_level": 26,
    "display_order": 8101,
    "has_data": "N",
    "is_leaf": "N",
    "value": 251,
    "parent_id": 314293
  }, {
    "id": 9526,
    "name": "Catarrhini",
    "tree_level": 26,
    "display_order": 8102,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17435,
    "parent_id": 314293
  }, {
    "id": 9822,
    "name": "Sus",
    "tree_level": 26,
    "display_order": 8108,
    "has_data": "N",
    "is_leaf": "N",
    "value": 21,
    "parent_id": 9821
  }, {
    "id": 9895,
    "name": "Bovidae",
    "tree_level": 26,
    "display_order": 8112,
    "has_data": "N",
    "is_leaf": "N",
    "value": 16,
    "parent_id": 35500
  }, {
    "id": 169418,
    "name": "Mustelinae",
    "tree_level": 26,
    "display_order": 8190,
    "has_data": "N",
    "is_leaf": "N",
    "value": 11,
    "parent_id": 9655
  }, {
    "id": 337687,
    "name": "Muroidea",
    "tree_level": 26,
    "display_order": 8202,
    "has_data": "N",
    "is_leaf": "N",
    "value": 741,
    "parent_id": 1963758
  }, {
    "id": 9665,
    "name": "Mustela",
    "tree_level": 27,
    "display_order": 8256,
    "has_data": "N",
    "is_leaf": "N",
    "value": 11,
    "parent_id": 169418
  }, {
    "id": 9823,
    "name": "Sus scrofa",
    "tree_level": 27,
    "display_order": 8261,
    "has_data": "N",
    "is_leaf": "N",
    "value": 21,
    "parent_id": 9822
  }, {
    "id": 10066,
    "name": "Muridae",
    "tree_level": 27,
    "display_order": 8267,
    "has_data": "N",
    "is_leaf": "N",
    "value": 741,
    "parent_id": 337687
  }, {
    "id": 27592,
    "name": "Bovinae",
    "tree_level": 27,
    "display_order": 8277,
    "has_data": "N",
    "is_leaf": "N",
    "value": 16,
    "parent_id": 9895
  }, {
    "id": 314295,
    "name": "Hominoidea",
    "tree_level": 27,
    "display_order": 8339,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17435,
    "parent_id": 9526
  }, {
    "id": 9604,
    "name": "Hominidae",
    "tree_level": 28,
    "display_order": 8386,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17435,
    "parent_id": 314295
  }, {
    "id": 9668,
    "name": "Mustela putorius",
    "tree_level": 28,
    "display_order": 8389,
    "has_data": "N",
    "is_leaf": "N",
    "value": 11,
    "parent_id": 9665
  }, {
    "id": 9903,
    "name": "Bos",
    "tree_level": 28,
    "display_order": 8395,
    "has_data": "N",
    "is_leaf": "N",
    "value": 16,
    "parent_id": 27592
  }, {
    "id": 39107,
    "name": "Murinae",
    "tree_level": 28,
    "display_order": 8420,
    "has_data": "N",
    "is_leaf": "N",
    "value": 741,
    "parent_id": 10066
  }, {
    "id": 9669,
    "name": "Mustela putorius furo",
    "tree_level": 29,
    "display_order": 8545,
    "has_data": "N",
    "is_leaf": "N",
    "value": 11,
    "parent_id": 9668
  }, {
    "id": 9913,
    "name": "Bos taurus",
    "tree_level": 29,
    "display_order": 8547,
    "has_data": "N",
    "is_leaf": "N",
    "value": 16,
    "parent_id": 9903
  }, {
    "id": 10088,
    "name": "Mus",
    "tree_level": 29,
    "display_order": 8556,
    "has_data": "N",
    "is_leaf": "N",
    "value": 3,
    "parent_id": 39107
  }, {
    "id": 10114,
    "name": "Rattus",
    "tree_level": 29,
    "display_order": 8557,
    "has_data": "N",
    "is_leaf": "N",
    "value": 740,
    "parent_id": 39107
  }, {
    "id": 207598,
    "name": "Homininae",
    "tree_level": 29,
    "display_order": 8606,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17435,
    "parent_id": 9604
  }, {
    "id": 9605,
    "name": "Homo",
    "tree_level": 30,
    "display_order": 8684,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17435,
    "parent_id": 207598
  }, {
    "id": 9606,
    "name": "Homo sapiens",
    "tree_level": 31,
    "display_order": 8808,
    "has_data": "N",
    "is_leaf": "N",
    "value": 17435,
    "parent_id": 9605
  }
];

const stratify = d3.stratify()
  .parentId(function(d) {
    return d.parent_id;
  });

const hierarchicalData = stratify(data);

console.log(hierarchicalData)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

【讨论】:

  • 嗨,它适用于我共享的 json,但对于这个 json jsfiddle.net/6djrp2o7,它会作为多个根出现错误。 @Gerardo
  • 那是因为你只能有一个根,即只有一个parent_idnull的对象。
  • 我怎样才能在太阳爆发时显示这个 json jsfiddle.net/6djrp2o7
  • 请不要在评论区提问。如果您有新问题(就是这种情况),请将其作为问题发布,并附上所有相关详细信息。但是,我再说一遍:您的数据必须只包含 一个 根。
  • 如果你看到太阳爆发的物体,他们可能是多个父母,他们自己有多个孩子。抱歉在评论区提问
猜你喜欢
  • 2016-02-17
  • 1970-01-01
  • 2018-10-24
  • 2012-06-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-15
  • 1970-01-01
相关资源
最近更新 更多