0

d3 は初めてですが、csv ファイルからデータをロードし、svg 要素を使用して視覚化する段階になりました。

d3.csv("data.csv", function(data) {         
csvData = data;                         
    svg.selectAll("circle")             
                    .data(csvData)
                    .enter()      
                    .append("circle")
                    .attr("cx", function(d) { return d.LocationX})  
                    .attr("cy", function(d) { return d.LocationY})  
                    .attr("r", 10)                                          
                    .attr("stroke", "black")
                    .attr("fill", "orange")

        })

明らかに、すべてのデータ ポイントが同時にプロットされます。D3関数を使用してプロットをポイントごとに「構築」する効率的な方法はありますか? 従うべき例が見つかりません。

4

2 に答える 2

3

これをシミュレートするには、半径 0 の円を追加し、トランジションでそれを増やします (アニメートすることはできますが、必須ではありません)。コードは次のようになります。

svg.selectAll("circle")             
                .data(csvData)
                .enter()      
                .append("circle")
                .attr("cx", function(d) { return d.LocationX})  
                .attr("cy", function(d) { return d.LocationY})       
                .attr("stroke", "black")
                .attr("fill", "orange")
                .attr("r", 0)
                .transition().duration(0)
                .delay(function(d, i) { return i * 500; })
                .attr("r", 10);

これにより、半径 0 の円が作成され、半径が 10 に増加する円のインデックスに応じて遅延が増加する遷移が追加されます。の上。この間隔は明らかにカスタマイズできます。

明確にするために、すべての DOM 要素は最初に作成されます。属性が次々に表示されるように変更するだけです。この方法の利点は、D3 の残りの機能とうまく適合し、データを分離するために他の方法に頼る必要がないことです。

于 2013-11-08T15:06:29.130 に答える