【问题标题】:Data for sunburst charts with d3.hierarchy using D3js v4使用 D3js v4 使用 d3.hierarchy 的旭日形图数据
【发布时间】:2018-04-29 08:13:50
【问题描述】:

我正在尝试使用 d3.hierarchy 和 d3js v4 获得旭日形图。我在这里做了与example 相同的操作。但是由于我得到的数据是一个对象数组,并且与示例中使用的数据不同,因此我确实添加了一个小函数,以便数据与示例中的数据相同。下面是函数

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

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

谢谢。

【问题讨论】:

  • 您有什么问题或问题?
  • @TomShanley 我收到一个错误“无法读取 null 的属性‘数据’”并得到一个黑色圆圈。
  • 文档显示预期的数据格式是一个具有children 属性的对象,它是一个数组github.com/d3/d3-hierarchy

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


【解决方案1】:

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

d3.hierarchy() 查找具有“name”和“children”的对象并操作partition(root) 使用的数据。

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

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

这是一个 FIDDLE 的更改。 (顺便说一句,我评论了arrayToObject

希望这会有所帮助。 :)

【讨论】:

    猜你喜欢
    • 2016-06-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-09
    • 2016-05-09
    相关资源
    最近更新 更多