d3.js - 过滤d3中的数据以绘制圆形或正方形

Question

我在理解d3中的选择和过滤时遇到了一些麻烦。假设我有一个简单的数组:

data = [1, 2, 6, 3, 4]

如果值<5，我想绘制圆形，如果值> = 5，我想绘制正方形。我的代码现在仅绘制圆形，如下所示:

var svg = d3.select("body").append("svg")
svg.selectAll("shapes")
    .data(data)
    .enter()
    .append("circle")

和圈子的其他属性。我需要使用.filter()方法，但是我不知道将它放在哪里。我尝试做类似的事情:

var svg = d3.select("body").append("svg")
svg.selectAll("shapes")
    .data(data)
    .enter()
    .filter(function(d){if (d>5){console.log('working');})
    .append("circle")

但是然后我用append方法出错。有人可以为我指出正确的方向吗？

Answer 1

问题是在.enter()之后，您将返回一个嵌套数组，因此会出现错误:

Uncaught TypeError: Object [object Array] has no method 'append'

要使用.filter()，您需要在.append()之后应用它:

var data = d3.range(10);
var svg = d3.select("body").append("svg");

var shapes = svg.selectAll(".shapes")
    .data(data).enter();

shapes.append("circle")
    .filter(function(d){ return d < 5; })
    .attr("cx", function(d, i){ return (i+1) * 25; })
    .attr("cy", 10)
    .attr("r", 10);

shapes.append("rect")
    .filter(function(d){ return d >= 5; })
    .attr("x", function(d, i){ return (i+1) * 25; })
    .attr("y", 25)
    .attr("width", 10)
    .attr("height", 10);

使用上面的代码(也在this fiddle中)，我得到以下输出:

请注意，您还可以使用Array's filter method达到相同的效果，例如

var shapes = svg.selectAll(".shapes")
    .data(data.filter(function(d){ return d < 5; })).enter()
    .append("circle")
    .attr("cx", function(d, i){ return (i+1) * 25; })
    .attr("cy", 10)
    .attr("r", 10);