散布図のノードを1つずつプロット/追加するためにd3を使用するにはどうすればよいですか？

Question

私はD3.jsとJavascriptでかなり新しいです。ごめんなさい。 私はちょうど私のCSVファイルに保存されているすべてのデータをプロットすることができ、今D3のチュートリアルを行ってきました、と。（d3.csv機能による負荷）

私はそれの興味、ドットをプロットすることが可能ですそれらを一度にプロットするのではなく、1つずつ

var dataset; 
d3.csv("testcase.csv", function(data) { 
    dataset = data; 
    var w = $(window).width(); 
    var h = $(window).height(); 

    var svg = d3.select("body") 
       .append("svg") 
       .attr({ 
        width: w, 
        height: h, 
       }); 

    function draw(data){ 
     var circle = svg.selectAll("circle") 
        .data(data); 

     circle.enter().append("circle") 
       .attr({ 
        "cx": data["x"], 
        "cy": data["y"], 
        "r": data["r"], 
        "fill": "rgb(0,0,0)", 
       }); 
    } 

    draw(dataset[0]); 

    var index = 1; 
    setInterval(function() { 
     if(index<dataset.length){ 
      draw(dataset[index]); 
      index++; 
     } 
    }, 1500); 

これは、私はそれがドットの座標、そしてまたその半径保存したCSVファイルには、この時点でドットをプロットするために得るものです。たとえば：

x,y,r 100,100,50 200,100,30 400,300,20 500,400,50 470,800,40 400,600,40

私はそれを一つのドット1をプロットできるようにsetInterval機能を使用しようとしているが、それは（draw(dataset[0])によってトリガすべき最初のものを含む）は何をプロットしませんでした とまた、値が正しいかどうかを確認するためにconsole.log機能を使用すると、それは全く正常なようです。 the output of console pad

何が問題になりますか？あなたの助けていただきありがとうございます：/

Answer 1

マシューの答えに続いて、setIntervalではなくd3の遷移を使用すると、ノードを個別に処理するループを構築する必要はなく、彼が記述した問題も回避できます（少なくとも最初のパスでは、後で、あなたは）再び共有のための

 var data = "x,y,r\n"+ 
"100,100,50\n"+ 
"200,100,30\n"+ 
"400,300,20\n"+ 
"500,400,50\n"+ 
"470,800,40\n"+ 
"400,600,40\n" 
; 

var dataset = d3.csv.parse (data); 

var svg = d3.select("body") 
.append("svg") 
.attr({ 
    width: 600, 
    height: 400, 
}); 

var circle = svg.selectAll("circle") 
.data(dataset); 

circle.enter().append("circle") 
    .each (function (d,i) { 
    d3.select(this).transition() 
    .delay(i * 1200) // <- this does what you intended setinterval to do 
    .attr({ 
    "cx": d.x, 
    "cy": d.y, 
    "r": d.r, 
    "fill": "rgb(0,0,0)", 
    }); 

}); 
; 

http://jsfiddle.net/Qh9X5/7807/

Answer 2

これで、d3の新しいロジックエラーが発生しました。描画関数を呼び出すたびに、データも再バインドされます。しかし、新しいデータについてd3に伝えることに加えて、d3の古いデータの記憶も消去されます。したがって、あなたは効果的にd3を伝えています。この新しいデータは真実であり、私が過去にあなたに話したデータはすべて忘れてしまいます。

これは少し単純です。

d3は、実際にあなたが話したことを実際に忘れていません。しかし、新しいもの、既に存在するもの、古いものを知る方法が必要です。これを行うために、.dataは、データ配列のインデックスに基づいて各データにキーを割り当てます。 1つの要素だけをバインドするたびに、常に0のキーが得られます。したがって、d3は、新しい要素をバインドするように求めることはありません。

これを解決するには、data,as described in in the documentationにキー機能を渡します。いくつかの意味を成して

function draw(data, key){ 
    var circle = svg.selectAll("circle") 
       .data(data, function(d){ return key; }); 

    circle.enter().append("circle") 
      .attr({ 
       "cx": data["x"], 
       "cy": data["y"], 
       "r": data["r"], 
       "fill": "rgb(0,0,0)", 
      }); 
} 

draw(dataset[0], 0); 

var index = 1; 
setInterval(function() { 
    if(index<dataset.length){ 
     draw(dataset[index], index); 
     index++; 
    } 
}, 1500); 

ん：

あなたのコードは、その後の線に沿って何かを見て必要がありますか？私は非常にドキュメントの徹底的な読書をお勧めします。それは私が学んだやり方であり、ドキュメンテーションとしては非常にうまくレイアウトされています。