如何創建散點圖，一次又一次地刪除d3js中的散點圖？

Question

所以我有一個.csv文件，其中包含多列數據。 X，Y，D1，D2，D3
28,77,1,2,3
27,78,4,5,6
21,79,2,7,9
10,80,5,7,8

我能夠在單個圖形上創建d1，d2和d3的散點圖，但所需的是：首先繪制d1，然后將其刪除，再繪制d2，依此類推。

我知道可以為每個數據集使用單獨的函數＆setTimeout（）來實現，但是我有很多這樣的數據集，因此多次編寫相同的代碼效率不高。

有人可以幫我嗎？

編輯：
因此，這是根據@Lars建議修改的代碼的一部分，它可以按我的意願工作！

   var indices= d3.keys(mydata1[0])
            .filter(function(d) { return (d !== "xaxis" && d!="yaxis"); }).sort();
   indices.forEach(function(d, i) {
   setTimeout(function() { update(d); }, 5000 * i);
    });
   function update(idx) {

    p.selectAll("ellipse").remove(); //remove previous plot--to give animation like effect

    p.selectAll(".R")
    .attr("class", "ellipse")
    .data(mydata1)
    .enter()
    .append("ellipse")
    .attr("cx", function(d){ return scaleX(d["xaxis"]);})
    .attr("cy", function(d){return scaleY(d["yaxis"]);})
    .attr({
        "rx": 3,
        "ry": 4,
        })
    .attr("fill", function(d)
    {    
        d[idx]=(d[idx]/2)+32;
        for(i=0; i<64; i++)
        {
            if (d[idx]==0)
                return mycolor[0];
            else if(d[idx]>i && d[idx]<=(i+1))
                return mycolor[i];
            else if(d[idx]<0)
                return "none";
        }
    });
}

Answer 1

您基本上有兩種方法可以做到這一點。 首先，使用setTimeout更新所引用的數據部分。 假設data保存您的數據，這看起來將類似於以下內容。

function update(idx) {
  svg.selectAll("circle")
     .attr("cx", function(d) { return xScale(d[idx]); })
     .attr("cy", function(d) { return yScale(d[idx]); });
}

var indices = ["d1", "d2", "d3"];
indices.forEach(function(d, i) {
  setTimeout(function() { update(d); }, 1000 * i);
});

另外，您可以使用D3的.transition()來實現相同的效果。 這有點尷尬，因為它不是用於此類事情的。 這個想法是創建一組虛擬元素來驅動過渡。

svg.selectAll("dummy").data(indices).enter().append("dummy")
   .transition().duration(1000).delay(function(d, i) { return i * 1000; })
   .attr("foo", function(d) { update(d); });

我建議使用使用setTimeout的方法。