过滤 d3 中的数据以绘制圆形或方形 [英] Filter data in d3 to draw either circle or square

问题描述

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

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

如果值

我想画圆圈如果 >= 5，则为 5 和正方形.我的代码现在只绘制圆形，如下所示:

var svg = d3.select("body").append("svg")svg.selectAll("形状").data(数据).进入().append("圆圈")

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

var svg = d3.select("body").append("svg")svg.selectAll("形状").data(数据).进入().filter(function(d){if (d>5){console.log('working');}).append("圆圈")

但是我在使用 append 方法时遇到错误.有人能指出我如何实现这一目标的正确方向吗?

解决方案

问题是在你 .enter() 之后你返回一个嵌套数组，因此你的错误:

<块引用>

未捕获的类型错误:对象 [object Array] 没有方法 'append'

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

var data = d3.range(10);var svg = d3.select("body").append("svg");var shape = svg.selectAll(".shapes").数据(数据).输入()；形状.附加(圆圈").filter(function(d){ return d <5; }).attr("cx", function(d, i){ return (i+1) * 25; }).attr("cy", 10).attr("r", 10);shape.append("rect").filter(function(d){ return d >= 5; }).attr("x", function(d, i){ return (i+1) * 25; }).attr("y", 25).attr("宽度", 10).attr("高度", 10);

使用上面的代码(也在，例如

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

I'm having a bit of trouble understand selections and filtering in d3. Let's say I have a simple array:

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

I want to draw circles if the value < 5 and squares if it's >= 5. My code right now only draws circles and looks like this:

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

and other attributes for circles. I need to use the .filter() method, but I don't know where to put it. I tried doing something like:

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

but then I get an error with the append method. Can someone point me in the right direction on how I'd accomplish this?

解决方案

The problem is that after you .enter() you are returning a nested array, hence your error:

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

To use .filter(), you need to apply it after the .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);

Using the code above (also in this fiddle), I get the following output:

Note that you can also achieve the same effect using Array's filter method, e.g.

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);

这篇关于过滤 d3 中的数据以绘制圆形或方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！