Question

我有一个动态数组来显示包含多行的折线图。例如：

var data = 
[[{x:2005, y:100}, {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:100}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

我脚本的这一部分将绘制线条：

graph.selectAll("path.line")
.data(data)
.enter().append("path")
.attr("class", "line")
.style("stroke", function(d, i) { return d3.rgb(z(i)); })
.style("stroke-width", 2)
.attr("d", d3.svg.line()
.y(function(d) { return y(d.y); })
.x(function(d,i) { return x(i); }));

（我使用的脚本基于http://cgit.drupalcode.org/d3/tree/libraries/d3.linegraph/linegraph.js）

我的问题：数据阵列是动态的，我事先并不知道其中的内容。有时，2005年的y值为null：

var data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

如何让第二行忽略第一个对象，并从2007年开始？

根据答案1，这就是我现在所拥有的，仍然显示整行：

data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]];

var validatedInput = function(inptArray) { 
 return inptArray.filter(function(obj) {
  return obj.y != null;
 });
};

graph.selectAll("path.line")
    .data(data, validatedInput)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .x(function(d,i) { return x(i); }));

Answer 1

这应该这样做：

.data(data, function(inptArray) { 
  return inptArray.filter(function(obj) {
   return obj.y != null;
  }) 
});

尽管如此写它会更好：

var validatedInput = function(inptArray) { 
 return inptArray.filter(function(obj) {
  return obj.y != null;
});

.data(data, validatedInput);

或者您可以在将数据对象指定给D3之前对其进行格式化：

var data = data.map(function(obj){
 return obj.filter(function(obj) {
  return obj.y != null;
 })
})

Answer 2

最后，我根据解决方案here自行解决了这个问题。诀窍是尽可能晚地删除空值，这样就可以保留画布上所有值（点）的位置。

graph.selectAll("path.line")
    .data(data)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .defined(function(d) { return d.y; }) // Omit empty values.
    .x(function(d,i) { return x(i); }));

这适用于行的开头和结尾的空值。

D3：使用多行跳过折线图中的空值

2 个答案: