d3 selectAll Confusion

Question

我对D3中的选择方法感到困惑。根据{{​​3}}上的描述，使用D3.selectAll（selector）方法选择与指定选择器匹配的所有元素。将在文档遍历顺序（从上到下）中选择元素。如果当前文档中没有元素与指定的选择器匹配，则返回空选择。

然后给出数据：

XValue     Yvalue     type A     type B    X2Value    Y2Value
1          2          A          A1        1          1
1          2          A          A2        1          1

在点击事件中我如何引用所有类型为A =“A”的数据点我现在使用`d3.select（this），在这个实例中需要点击2点同一点才能操作两个数据点。相反，我希望能够引用所有类型A =“A”属性，以便我可以在X2 Y2值和X1 Y1值之间切换。

然后我的困惑是如何用d3.selectAll(this)

写作

修改

看起来这样做的方法是使用方法d3.nest() 以便正确链接该数据。但是我仍然需要动态地将this分配给正确的密钥

d3.csv('AcreageData.csv', function (data) {

var nestedCsv = d3.nest()
        .key(function (d) { return d.type A; })
        .entries(data);

 var circles = svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')

    .attr('cx',function (d,i) { 
        return xScale(nestedCsv[i].values.X2Value) })   
    .attr('cy',function (d,i) { 
        return yScale(nestedCsv[i].values.Y2Value) })   
    .attr('r',function (d,i) { 
        return Math.abs(rScale(nestedCsv[i].values.Radii))})    
    .attr('fill',function (d,i) { 
        return cScale(nestedCsv[i].values.TypeA); })
    .attr("stroke",function (d,i) { 
        return cScale(nestedCsv[i].values.TypeA); })    
    .attr('stroke-width',4)

    .on('click', function (d) {
    d3.select(this)
    .transition()
    .attr('r', 50)
    .duration(500)
    .attr('cx',function (d,i) { 
            return xScale(nestedCsv[i].values.XValue) })
    .attr('cy',function (d,i) { 
            return yScale(nestedCsv[i].values.Yvalue) })
    .attr('r',function (d,i) { 
            return Math.abs(rScale(nestedCsv[i].radii))})
    .attr('fill', "none")
    .attr("stroke",function (d,i) { 
            return cScale(nestedCsv[i].TypeA); })
    .attr('stroke-width',4)
     })

这个结论我来阅读Github在他的例子中，他可以直接选择他希望动画的内容但是因为我想做鼠标点击，我需要这个来引用所选择的点及其所有相关点。肯定这是正确的方法，但我在语法上磕磕绊绊

Answer 1

您可能需要提供一个DOM示例，以便我们完全了解您的操作，但通常您在DOM元素上使用your_specific_file.jpg或select。< / p>

因此，例如，您可以使用以下内容选择整个圆圈并同时更改所有圆圈的颜色：

selectAll

关于要充分探索的主题的一篇好文章是Mike Bostock's 3 Little Circles。

对于您的特定问题，您只是想开始访问您的数据（您不会因此而使用d3.selectAll("circle").style("color", "red");）。假装您的数据是一个数组，只需过滤它：

d3.select