筛选 D3js (v3) 中路径元素的数据集

Question

我正在使用数据集使用 D3js 绘制点和路径元素。数据集包含我要过滤的未定义值。我知道如何过滤点元素，但无法过滤数据集中的路径元素，如面积和线。我只想根据实际值绘制面积和线条，因此我必须过滤未定义的元素。我的数据集如下所示：

ds = [
{x: 0, param1: 230, param2: 1070},
{x: 2, param1: 190, param2: undefined},
{x: 5.5, param1: 161, param2: 1207},
{x: 8, param1: 167, param2: 1165},
{x: 11, param1: 154, param2: 987},
{x: 12, param1: undefined, param2: 876},
{x: 12.32, param1: 187, param2: undefined},
{x: 15, param1: 156, param2: undefined},
....
];

我知道如何过滤数据集以在散点图中绘制圆形元素(简化版(：

group.selectAll("circle")
.data(ds)
.enter()
.append("circle")  
.filter(function(d) {return d.param1 != undefined} )
.(...);

我已经为该区域尝试了以下代码：

var area = d3.svg.area()
.x(function(d) {return x(d.x);})
.y0(h-padding)
.y1(function(d) {return y(d.param2);});
group.append("path")
.attr("class","area")
.datum(ds)
.filter(function(d) { return d.param2 != undefined})
.attr("d",area);

我想我以不正确的方式使用过滤器功能。我试图将过滤器添加到该区域的变量声明中，但我也没有工作。对于线元素，我遇到了同样的问题。

我研究的SO示例都是关于过滤圆/点(例如(元素。我没有找到任何关于过滤路径元素的信息。

任何帮助不胜感激。

Answer 1

在将数据绑定到 DOM 之前进行过滤要容易得多，而不是在绘制元素等之后尝试转换它。您可以使用标准数组过滤器从数据集中删除未定义的数据点：

array.filter( function(d){ // your filter code here } )

在上下文中：

group.selectAll("circle")
.data( ds.filter(function(d) {return d.param1 != undefined}) )
.enter()
.append("circle")  

同样的原则也适用于面积图：

group.append("path")
.attr("class","area")
.datum( ds.filter(function(d){ return d.param2 != undefined }) )
.attr("d",area);

数据在绑定到 DOM 之前更容易操作，因此请事先尽可能多地进行清理和过滤。