Javascript 如何有选择地附加圆？

我在下面的代码片段中尝试在气泡图中添加圆圈。但是，由于数据文件的性质，GDP和/或预期寿命中可能存在诸如

0

或

NaN

之类的假值

我想知道如果x或y坐标为0，是否有一种方法可以跳过附加某个圆

var dots = svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.GDPperCapita); } )
      .attr("cy", function (d) { return y(d.LifeExpectancy); } )
      .attr("r", function (d) { return z(d.Population); } )
      .style("fill", function (d) { return myColor(d.BirthRate); } )
      .style("opacity", "0.7")
      .attr("stroke", "white")
      .style("stroke-width", "2px")

使用过滤器

这可以通过过滤数据数组（这里，

array.prototype.filter

）或过滤选择（这里，

selection.filter

）来完成。不要将

Array.prototype.filter

与

selection.filter

混淆，它们在下面的示例中看起来非常相似，但它们是非常不同的东西

要筛选数据，请执行以下操作：

var dots = svg.append('g')
    .selectAll("dot")
    .data(data.filter(function(d){
        return d.GDPperCapita && d.LifeExpectancy
    }))
    //etc...

要筛选您的选择，请执行以下操作：

var dots = svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .filter(function(d){
        return d.GDPperCapita && d.LifeExpectancy
    })
    //etc...

你应该使用哪一个取决于一些你没有分享的细节

此外，如果您永远不会在dataviz中使用这些值，您也可以在row函数中去掉它们，假设您使用的是

d3.csv

或任何其他

d3.dsv

变体（row函数在

d3.json

中不可用）。大概是这样的：

d3.csv("foo.csv", function(d){
    if (d.GDPperCapita && d.LifeExpectancy) return d;
}).then(
    //etc...

或按建议返回

null

：

---

在我看来，使用行函数是目前为止最好的选择。

没错！依我看，出于性能原因，尽可能早地进行筛选，并保持较低的内存占用！这明确规定了以下选择顺序：1。在行功能加载时（良好）；2.绑定前过滤数据数组（中性）；3.作为最后手段筛选所选内容（通常不好）。当涉及到大型数据集时，按照上述顺序进行循环的次数会越来越多，这确实会造成伤害。

d3.csv("foo.csv", function(d){
    return d.GDPperCapita && d.LifeExpectancy ? d : null;
}).then(
    //etc...