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'; });