d3 selectAll 混淆

Question

我对 D3 中的选择方法感到困惑。根据Github 上的描述，使用 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 次才能对两个数据点。相反，我希望能够使用 type A = "A" 属性引用 all，以便我可以在 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)
     })

这个结论是我读到http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/ 在他的示例中，他可以直接按名称选择他希望制作动画的内容，但是因为我希望进行鼠标点击，所以我需要它来引用所选点及其所有相关点。绝对这是正确的方法，但我在语法上磕磕绊绊

Answer 1

您可能需要提供一个 DOM 示例让我们充分了解您在做什么，但通常您会在 DOM 元素上使用 select 或 selectAll。

因此，例如，您将使用以下命令来选择一大堆圆圈并立即更改所有圆圈的颜色：

d3.selectAll("circle").style("color", "red");

关于这个主题的一篇好文章是Mike Bostock's 3 Little Circles。

对于您的特定问题，您只是想开始访问您的数据（您不会为此使用d3.select）。假设您的数据是一个数组并简单地过滤它：

var typeAs = data.filter(function(f) { return f.[type A] === 'A'; });