绘制具有不同数量值的多条线

Question

我有一个 csv，其中包含多线系列图表上两条线的两列数据。

数据是这样的：

date,Presidential Approval,Congressional Approval
1/11/09,,39
2/8/09,64,
3/12/09,59,
4/6/09,61,
4/21/09,,49
4/21/09,63,
6/14/09,61,

如您所见，两列的数据没有映射，但我希望这两条线位于同一张图表上。

有没有办法像这样对两个时间序列使用 enter 方法？

如果您使用经典的 D3 输入模式：

var lines = svg.selectAll(".lines")
      .data(data_array)
      .enter()
        .append('g')
        .attr('data-name', function(d,i) { return d.name; })
        .attr('class','lines');

    lines
      .append("path")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke-width", 4.75);

它returns 0 值为空值。我希望它跳过这些并在每行的点之间进行插值。

Answer 1

我发现这样做的最佳方法是在嵌套阶段提前过滤我的数据：

var data_array = keys.map(function(name) {
      return {
        name: name, // values > 0 will be excluded
        values: data.filter(function(d) { return +d[name] > 0 }).map(function(d) {
          return {date: d.date, poll: +d[name]};
        })
      };
    });

绘制具有不同数量值的多条线

Plotting multiple lines with different number of values

visualization

d3.js