使用D3js v4的d3.hierarchy的旭日形图的数据

时间:2017-11-15 22:50:34

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

我正在尝试使用d3.hierarchy和d3js v4获得一个旭日图表。我在这里和example做了同样的事情。但是由于我作为对象数组得到的数据与示例中使用的数据不一样,所以我添加了一个小函数,以便数据与示例中的数据相同。以下是功能

const arrayToObject = (array) =>
    array.reduce((obj, item) => {
        obj[item.name] = item
        return obj
}, {})

以下是小提琴的链接:https://jsfiddle.net/snt1/mbszu1u5/8/

谢谢。

1 个答案:

答案 0 :(得分:4)

我不确定这是否是一个答案(我认为是)或者我应该将其作为评论发布在您的代码中:

d3.hierarchy()使用" name"查找对象和#34;孩子"并操纵partition(root)使用的数据。

如果您在https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099调试代码,则会发现d3.hierarchy()收到的对象为{name: "flare", children: Array[15]}

在你的代码中,如果我只是将data数组包装在一个对象中,请说: {name: "test", children: data},它创造了一个颜色和适当标题的旭日形象。

这里有一个FIDDLE的变化。 (顺便说一句,我评论过arrayToObject

希望这会有所帮助。 :)