当我在d3.js中执行.data（数据）时，如何跳过数组元素

Posted 2021-03-28

我想如果数据不同于美国，d.pais！ =“USA”数据被省略。我想如果数据与美国不同，d.pais！ =“USA”数据被省略。并且没有创建圆圈。

我该怎么做？

    d3.selectAll("circle").remove();


    g.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
    .attr("cx", function(d) {
        if(d.pais=="USA" ){
            return projection([d.longitud, d.latitud])[0];
        }
    })
    .attr("cy", function(d) {
        if(d.pais=="USA" ){
            return projection([d.longitud, d.latitud])[1];
        }
    })
    .attr("r", function(d) {
        if(d.pais=="USA" ){
         return 3;
        }
    })

答案

在D3逻辑中使用之前，过滤数据数组要容易得多：

var usaData = data.filter(d => d.pais === "USA");
g.selectAll("circle")
    .data(usaData)
    .enter()
    .append("circle")
...

您可以在W3学校网站上了解有关所有array manipulation functions的更多信息......

另一答案

In your scenario, you mean you want to "filter" the elements according to your data.

您可以对代码中的不同步骤进行过滤。就像@ SteveR的答案一样，您可以使用javascript数组方法将数据预先处理到d3代码中。

或者在d3.js中，它还提供了一些进行过滤的方法：

1. 在数组doc中过滤 d3.array继承到javascript.Array并扩展到统计方法
2. 过滤元素doc 一个。使用d3.selection.filter 湾使用d3.select（）

First part

这部分就像@ SteveR的回答一样

const filtered = data.filter((d)=>{return d.location !== 'USA';})

Second part

这部分是对元素的过滤（使用这种方法，你将不得不处理更多的考虑）

使用d3.selection.filter方法

const svg = d3.select(DOM.svg(200,200));

const circles = svg.selectAll('circle').data(data);

const circlestages = svg.selectAll('text')
                        .data(data)




circles.enter()
       .append('circle')
       .attr('cx', 10)
       .attr('cy', (d,i)=> 10 + i*20)
       .attr('r', 5)
       .attr('fill', 'red');

circlestages.enter()
            .append('text')
            .attr('x', 15)
            .attr('y', (d,i)=> 12 + i*20)
            .attr('font-size',10)
            .text((d,i)=>{
               return "name: "+ d.name +" , "+"location: " + d.location    ;
             });

 // filter after the element created
svg.selectAll('circle').filter((d,i)=> d.location === 'USA').remove();   
svg.selectAll('text').filter((d,i)=> d.location === 'USA').remove();

使用d3.select过滤元素并删除

const svg = d3.select(DOM.svg(200,200));

const circles = svg.selectAll('circle').data(data);

const circlestages = svg.selectAll('text')
                        .data(data);




circles.enter()
       .append('circle')
       .attr('cx', 10)
       .attr('cy', (d,i)=> 10 + i*20)
       .attr('r', 5)
       .attr('fill', 'red');

circlestages.enter()
            .append('text')
            .attr('x', 15)
            .attr('y', (d,i)=> 12 + i*20)
            .attr('font-size',10)
            .text((d,i)=>{
              return "name: "+ d.name +" , "+"location: " + d.location ;
            })
// filter the element using d3.select()
svg.selectAll('text').select((d,i,g)=> {return d.location === 'USA'?g[i]:null}).remove();
svg.selectAll('circle').select((d,i,g)=> {return d.location === 'USA'?g[i]:null}).remove();  

关于Observable的演示：qazxsw poi