javascript - d3 JSON 多折线图

Question

我正在尝试从一个 JSON blob 中绘制多行图，如下所示:

{"2007": [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...],
 "2008": [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...],
  ...
 "2012": [{"val":40, "mon":8}, {"val":50, "mon":9}, {"val":60, "mon":10}, ...]
}

数据基本上是每年的月度合计，有些年份有些月份没有数据。不过，我无法弄清楚如何解析 d3 中的数据。我尝试了各种方法，例如

var line = d3.svg.line()
 .interpolate("basis")
.x(function(d) { return x(d.mon); })
.y(function(d) { return y(d.val); });

svg.selectAll(".line")
 .data(series)
 .enter().append("path")
 .attr("class", "line")
 .attr("d", line);

但我似乎无法将数据放入 SVG 行中。有什么建议么？有没有更好的方法来构造 JSON？

Answer 1

以下是万一其他人遇到此问题的解决方案。诀窍是传递一个函数，该函数返回路径元素的“d”属性中的关联数组中的值。

  entries = d3.entries(data);

  var colors = d3.scale.category20()
    .domain(d3.keys(data));

  var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.month) })
    .y(function(d) { return y(d.value) });

  svg1.selectAll(".line")
    .data(entries)
  .enter().append("path")
    .attr("class", "line")
    // function(d), not just line function 
    .attr("d", function(d){ return  line(d.value); })
    .attr("stroke", function(d) { return colors(d.key) });

这个答案也有一些帮助: Using nested data with javascript D3 problem