如何使用 d3.chart 使用嵌套数据制作多个图表

Question

我正在尝试使用 d3.chart 框架创建多个图表。这似乎是一个常见的用例：d3.chart 的全部意义在于图表是可重用的！如果你能指出一个很棒的例子（：

我通过这个 (https://github.com/misoproject/d3.chart/wiki/quickstart) 教程创建了一个非常基本的“圆形图”。 （我完全复制了代码）。现在我想做的是为几组数据创建一个单独的图表。 我稍微编辑了一下。 在编辑之前，设置我们调用的图表：

var data = [1,3,4,6,10];

var chart = d3.select("body")
  .append("svg")
  .chart("Circles")
    .width(100)
    .height(50)
    .radius(5);

chart.draw(data);

我尝试将其更改为：

var data = [{key:1, values:[1,3,4,6,10]}, 
{key:2, values:[5,2,10,8,11]}, 
{key:3, values:[1,5,9,16,12]}]

var chart = d3.select("body")
  .selectAll("chart)
  .data(data)
  .enter()
  .append("svg")
  .chart("Circles")
    .width(100)
    .height(50)
    .radius(5);

chart.draw(function(d) { return d.values; });

但这不起作用。你可以在 3 个不同的地方看到一个圆的角，但是 其余部分被切断。但是，如果替换

chart.draw(function(d) { return d.values; });

与

chart.draw([1,3,4,6,10]);

它正确地生成了 3 个圆形图，所有这些都包含一个数据集。当我添加时

chart.draw(function(d) { console.log(d.values) return d.values; }); 

控制台显示了我试图传递的 3 个数组！我不明白这里发生了什么破坏了代码。它不应该与将实际数组传递给 3 个单独的图表完全相同吗？

这里是 JS bin 设置的链接：http://jsbin.com/jenofovogoke/1/edit?html,js,console,output 随意摆弄它！

代码在底部。

我对 java 脚本和 d3 很陌生，对 d3.chart 完全陌生。任何帮助将不胜感激！

Answer 1

我问了帮助运行 d3.chart 的 Irene Ros，她告诉我，问题在于 d3.chart 的 draw 方法只能接受数组或数据对象——它不能接受函数。她给了我一些有用的提示来解决这个问题：使用转换函数在图表中编辑我的数据，而不是使用函数，或者创建一个包含多个图表的图表（参见https://gist.github.com/jugglinmike/6004102这个例子）。

但最后我发现对我来说最简单的解决方案是手动设置数据。感觉有点过时了，因为 D3 已经为您完成了这项工作，但它比更改我的图表的整个设置要简单得多，并且允许嵌套数据（耶！）。

var svg = d3.select("body")
  .selectAll("svg")
  .data(data)
  .enter()
  .append("svg");

svg.each(function(d, i) {
  var chart = d3.select(this)
    .chart("Circles")
    .height(50)
    .width(100)
    .radius(5)
  var data = d.values;
  chart.draw(data);
});