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。也就是说，最初将有一个可见的圆，在 500 毫秒 2 之后，1 秒 3 之后等等上。您显然可以自定义此间隔。

澄清一下，所有的 DOM 元素都将在开始时创建，您只需更改属性，以使它们看起来一个接一个地出现。这样做的好处是它非常适合 D3 的其余功能，您不必求助于任何其他方法来分离数据。

于 2013-11-08T15:06:29.130 回答
1

d3 enter() 一次添加 csvData 数组中的所有元素。您可以通过从一个空数组开始，一次一个地将 csvData 中的元素（即点）推入其中，然后运行

  svg.selectAll("circle")             
    .data(NewArray)
    .enter()      
    .append("circle")

每次添加一个新点时，都在这个新数组上。

这是一个使用 setInterval 的工作示例https://bl.ocks.org/AndrewStaroscik/7371301，一旦添加了所有点，它就会被清除。

于 2013-11-08T14:02:33.687 回答