javascript - 如何有选择地附加圆圈？

Question

我有以下代码片段，我在其中尝试将圆圈附加到气泡图。但是，由于数据文件的性质，GDPperCapita 和/或 LifeExpectancy 中可能存在错误值，例如 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")

Answer 1

使用过滤器。

这可以通过过滤数据数组(此处为 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 变体(行函数在 d3.json 中不可用)。像这样:

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

或返回null，如提议here :

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

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