使用 d3 中的嵌套数据

Question

我正在探索 d3。我正在从非常详细的事务性 csv 数据创建气泡图。

我使用了 d3.nest() 和 d3.rollup() 删除了不必要的数据列，最终得到了最终的嵌套数据结构。但我不确定如何在 d3 中使用嵌套数据。

这是我的平面数据示例（删除了一些列以便在帖子中更好地显示它）

---

州、日期、日、月、年、星期、事故类型、死亡人数、限速

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,单车,1,70

WA,01-Jan-2015,1,January,2015,Thursday,单车,1,110

TAS,01-Jan-2015,1,January,2015,Thursday,单车,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,单车,1,100

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

---

我使用 .nest() 和 .rollup() 函数将上述 csv 数据转换为嵌套数据。转换后的数据样本如下

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

我的问题是如何直接使用数据？

1. 可以直接食用吗？
2. 我是否必须展平这些嵌套数据才能在 d3 中使用？

如果可能，请提供一些例子...

谢谢

Answer 1

我想通了。我无法在任何地方回答。人们发布了一半的答案，但没有人提出一个解决方案来向您展示一种扁平化嵌套数据的方法。

Q-1。我可以直接使用嵌套数据吗？

A-1. 是的，d3 可以使用嵌套数据。您必须为每个级别添加一个 <svg:g></svg:g> 元素，这将保存下一个级别的 __d__ 值。并且在任何级别，如果要访问父节点数据var parentData = d3.select(this.parentNode).datum();

Q-2。我是否必须展平这些数据才能在 d3 中使用？以及如何扁平化嵌套数据来消费？

A-2. 这是一种更好的方法，因为它是一次性操作，并且在 SVG 上输入的每个元素的所有数据都可用。使用.map() 函数遍历每个级别并将其展平。

示例

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);
		})
	});

我不知道这是最好的解决方案，但它工作得非常好。

希望这会有所帮助。