d3 JSON多折线图

d3 JSON multiple line chart

本文关键字：折线图 JSON d3      更新时间：2023-09-26

我正试图从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?

下面是解决方案，以防其他人遇到这个问题。诀窍是传递一个函数，该函数返回path元素"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) });

这个答案也有一些帮助:使用嵌套数据与javascript D3问题

我猜这里最大的问题是您从一个对象开始，而不是一个数组。d3.data接受一个数组，而不是一个对象，因此您可能需要这样设置数据:

[
  [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...],
  [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...],
  ...
]

如果您需要将当前数据转换为这种格式，请查看d3.entries，它将为您提供一个包含键和点数组的数组:

[
  {
    key: "2008",
    value: [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...]
  },
  { 
    key: "2008",
    value: [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...]
  },
  ...
]

请看下面的图，使用上面的第一种数据格式:http://jsfiddle.net/nrabinowitz/kmmyc/

相关文章：