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

How to make multiple charts with d3.chart using nested data

本文关键字：嵌套 绘制 数据 d3 何用      更新时间：2023-09-26

我正在尝试使用d3创建几个图表。图表框架。这似乎是一个常见的用例:d3的全部意义。毕竟，图表是为了让图表可重用!如果你能给我举个例子，那就太棒了(:

我通过这个(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; });

这不起作用。你可以在三个不同的地方看到一个圆的角，但是剩下的部分被切断了。但是如果replace 

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完全陌生。任何帮助都会非常感激!

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

然而，最后我发现对我来说最简单的解决方案是手动设置数据。这感觉有点像一个hack，因为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);
});
相关文章：