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);

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

我研究的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之前，它要容易得多，因此，请尽可能多地进行清理和过滤。

过滤D3js（v3）中路径元素的数据集

1 个答案: