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次才能对两个数据点进行操作。 相反，我希望能够使用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/在他的示例中，他可以直接通过名字选择他想要的东西进行动画处理，但是因为我希望进行鼠标单击，所以我需要使用它来引用选定的点及其所有相关点。 无疑，这是正确的方法，但是我在语法上im脚

Answer 1

您可能需要为我们提供一个DOM示例以完全了解您的操作，但是通常您会在DOM元素上使用select或selectAll 。

因此，例如，您将使用以下内容来选择整个圆圈，并一次更改所有圆圈的颜色：

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

迈克·波斯托克 （ Mike Bostock）的《三个小圈子》（3 Little Circles）是一篇值得全面探讨的好文章。

对于您的特定问题，您只想开始访问数据（您将不会使用d3.select ）。 假设您的数据是一个数组，只需对其进行过滤：

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