Data for sunburst charts with d3.hierarchy using D3js v4

Question

I am trying to get a sunburst chart using d3.hierarchy with d3js v4 . I did the same as an example here. But since the data I was getting as an array of objects and not the same as used in the example I did add a small function so that the data would be the same as from the example. Below is the function

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

Here is the link for the fiddle: https://jsfiddle.net/snt1/mbszu1u5/8/

Thank You.

@TomShanley I get an error "Cannot read property 'data' of null" and get a black circle instead. — SNT, Nov 16 '17 at 02:32
The docs show that the expected data format is an object with a property of `children` which is an array https://github.com/d3/d3-hierarchy — ksav, Nov 23 '17 at 06:24

score 4 · Answer 1 · answered Nov 16 '17 at 20:31

I'm not sure if this is an answer (I think it is) or I should post this as a comment BUT here's the thing with your code:

d3.hierarchy() looks for an object with "name" and "children" and manipulates the data which is then used by partition(root).

If you debug the code at https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099, you'll see that d3.hierarchy() receives an object as {name: "flare", children: Array[15]}

In your code, if I just wrap the data array in an object, say: {name: "test", children: data}, it creates a sunburst with colors and appropriate titles.

Here's a FIDDLE with the changes. (btw I've commented arrayToObject)

Hope this helps. :)

Data for sunburst charts with d3.hierarchy using D3js v4

1 Answers1