為什么在d3中我不能用一個數據集創建一組圓？

Question

我創建了一個散點圖，我在繪制自己的圓（數據點）時遇到了問題。

附加第一組圓時，它會在圖形上很好地繪制。 但是由於某種原因，我嘗試添加的下一組將不會被繪制。 怎么會這樣？ 我第二次使用輸入/添加/選擇錯誤嗎？

我有一個帶有代碼的JSFiddle： http : //jsfiddle.net/4wptM/

我沒有注釋加載和處理數據的部分，並使用較小的樣本創建了相同的數組。 可以看出，僅顯示了第一組圓圈，而沒有顯示第二組。

我的圓形部分代碼粘貼在下面：

    var circle = SVGbody
            .selectAll("circle")
            .data(graphData[0])
            .enter()
                .append("circle")
                .attr("cx",function(d){return xScale(100);})
                .attr("cy",function(d){return yScale(parseFloat(d))})
                .attr("r",5);

    circle = SVGbody
            .selectAll("circle")
            .data(graphData[1])
            .enter()
                .append("circle")
                .attr("cx",function(d){return xScale(200);})
                .attr("cy",function(d){return yScale(parseFloat(d))})
                .attr("r",5);

我只復制了這2個，以嘗試找出問題所在。 我的實際代碼在下面的for循環中。 當我在此循環中運行它時，它會為索引為1的圓圈和索引為3的圓圈繪制圓圈。

    for(var i = 0;i < graphData.length;i++){
        var circle = SVGbody
            .selectAll("circle")
            .data(graphData[i])
            .enter()
                .append("circle")
                .attr("cx",function(d){return xScale((i*100)+100);})
                .attr("cy",function(d){return yScale(parseFloat(d))})
                .attr("r",20);
        //console.log(i + "   :::::::   " + graphData[i])
    }

我們將不勝感激一些幫助。 我真的不知道我在做什么錯。

Answer 1

當對一個現有元素集進行操作時（如第二個.selectAll("circle")的例子） .selectAll("circle") .data()方法僅使用數組中的這些元素，這些元素在使用.selectAll()沒有相應的索引.selectAll()為了防止這種行為，你必須添加一個關鍵功能的第二個參數.data()作為解釋這里和這里 。

在這里，此函數只需要返回數組的每個元素：

function (d) {
    return d;
}

小提琴看起來像這樣：

var circle = SVGbody
                .selectAll("circle")
                .data(graphData[0], function(d) { return d; })  // <-- this one
                .enter()
                .append("circle")
                .attr("cx",function(d){return xScale(100);})
                .attr("cy",function(d){return yScale(parseFloat(d))})
                .attr("r",5);

小提琴

要更改元素的填充顏色，您必須使用.style("fill", ...)而不是.attr("fill", ...)

.style("fill", "green")