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

我有一些麻烦,了解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")

但是后来我发现了附加方法的错误。有人可以指出我是如何做到这一点的正确方向的?

问题是在.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);
http://stackoverflow.com/questions/20335118/filter-data-in-d3-to-draw-either-circle-or-square

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:d3.js – 在d3中过滤数据以绘制圆形或正方形