d3 selectAll混淆

Question

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

然后给出这些数据：

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 )，在本例中，它需要在同一点上单击两次才能对两个数据点进行操作。相反，我希望能够引用所有类型为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)
     })

这个结论我在他的例子中读到了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'; });