Question

我是新手并试图玩弄我的数据。我首先想象这些圈子如下：

  circle = svg.selectAll('circle')
        .data(dataFile)
        .enter()
        .append("circle")
        .attr("stroke", "black")
        .attr("id", function(d,i){return "id_" + i.toString();})
        .attr("class", function(d){return "Color_" + d.Cyl;})
        .attr("fill", function(d) {return color(d.Cyl);})
        .attr("cx", function(d) { return Scale.xScale(d.Weight); })
        .attr("cy", function(d) { return Scale.yScale(d.DealerCost); })
        .attr("r", r)
        .call(drag);

然后我使用nest（）函数对数据进行分组。

    var data = d3.nest()
                  .key(function(d) { return d.Cyl;})
                  .rollup(function(d) { 
                  return d3.sum(d, function(g) {return Number(g.value); });
    }).entries(csv);

最后，我尝试根据某些逻辑翻译圈子，这完美无缺。

 for(j=0; j<data.length;j++)
    {
            svg        
                .selectAll(".Color_" + data[j].key)
                .transition()
                .delay(function(d,i) { return 100; })
                .duration(1000)
                .ease("linear")
                .attr("cx", function(d,i) { return Scale.xScale(data[j].key})    
                .attr("cy", function(d,i) { return height - (i/val);})
    }

然而，一些专家告诉我，如果我使用 for循环与 d3.selection ，我很可能会做错事。所以我试图将我的代码的最后一部分转换为类似下面的代码，但它不起作用。有什么想法吗？

 svg
        .selectAll(function(d){return ".Color_" + d.key;})  
        .transition()
        .delay(function(d,i) { return 100; })
        .duration(1000)
        .ease("linear")
        .attr("cx", function(d,i) { return Scale.xScale(d.key})      
        .attr("cy", function(d,i) { return height - (i/val);})
    }

Answer 1

在您的第一个代码块中，您将引用您附加到变量circle的圆圈。要将转换添加到此选择，您应该能够使用以下代码：

circle
    .transition()
    .delay(function(d,i) { return 100; })
    .duration(1000)
    .ease("linear")
    .attr("cx", function(d,i) { return Scale.xScale(d.key); } )      
    .attr("cy", function(d,i) { return height - (i/val); } );

以这种方式使用时无需进行第二次选择。

如何在d3中选择嵌套数据元素

1 个答案: