0

我正在使用数据集通过 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 示例都是关于过滤圆/点（例如）元素。我没有找到任何关于过滤路径元素的信息。

任何帮助表示赞赏..

4

1 回答 1

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 之前更容易操作，所以事先尽可能多地进行清理和过滤。

于 2018-09-20T11:43:18.757 回答