javascript - 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

在将数据绑定(bind)到 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);

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