在d3中使用嵌套数据

Question

I am exploring d3. I am creating a bubble chart from very detailed and transactional csv data.

I have used d3.nest() and d3.rollup() remove unnecessary columns of the data and end up with final nested data structure. But I am not sure how to consume nested data in d3.

Here is the sample of my flat data ( Some columns are removed to display it better here on the post)

---

State,Date,Day,Month,Year,Dayweek,Crash Type,Number of Fatalities,Speed Limit

VIC,01-Jan-2015,1,January,2015,Thursday,Multiple vehicle,1,100

QLD,01-Jan-2015,1,January,2015,Thursday,Multiple vehicle,1,60

VIC,01-Jan-2015,1,January,2015,Thursday,Single vehicle,1,70

WA,01-Jan-2015,1,January,2015,Thursday,Single vehicle,1,110

TAS,01-Jan-2015,1,January,2015,Thursday,Single vehicle,1,40

SA,02-Jan-2015,2,January,2015,Friday,Multiple vehicle,1,60

QLD,03-Jan-2015,3,January,2015,Saturday,Multiple vehicle,1,100

NSW,04-Jan-2015,4,January,2015,Sunday,Single vehicle,1,100

WA,04-Jan-2015,4,January,2015,Sunday,Multiple vehicle,1,70

---

I converted above csv data to nested data using .nest() and .rollup() function. Converted data sample is as below

 Object { key: "VIC", // group by state values: [ { key: "January", // group by month values: [ { key: "40" // group by speed limit values: { accidents: 1 fatalities: 1 } }, {..}, {..} ] }, {..}, {..}, {..}, {..}, {..} ... ] 

My question is how can I consume data directly ?

1. Can I consume directly ?
2. Do I have to flatten this nested data to consume in d3 ?

If possible please provide some example ...

Thanks

Answer 1

I have figured it. I could not answer anywhere. People have posted half answers but no one has put a solution that show you a way to flatten nested data.

Q-1. Can I consume directly nested data?

A-1. Yes it can be consumed nested data by d3. You have to add a <svg:g></svg:g> element for each level and that will hold the __d__ value for the next level. And at any level, if you want to access the parent node data var parentData = d3.select(this.parentNode).datum();

Q-2. Do I have to flatten this data to consume in d3? And how to flatten nested data to consume?

A-2. This is much better approach, as it is one off operation, and all data available at each elements entered on SVG. Use .map() function to iterate though each level and flatten it.

Exmaple

 var flatdata = []; data.map(function (d) { d.values.map(function (s) { var tdata = s.values.map(function (t) { return { state: d.key, month: s.key, speed: t.key, accidents: t.values.accidents, fatalities: t.values.fatalities } }) flatdata = flatdata.concat(tdata); }) }); 

I dont know that is the best solution but it is working perfectly fine.

Hope this will be helpful.