Question

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函数逐点“构建”绘图？找不到合适的例子。

Answer 1

您可以通过添加半径为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的过渡。也就是说，最初会有一个圆可见，在500ms之后，在1s之后3等等。您可以明显地自定义此间隔。

为了澄清，所有DOM元素都将在开始时创建，您只需要更改属性，使它们看起来一个接一个地出现。这样做的好处是它可以很好地与D3功能的其余部分完美匹配，而且您不必使用其他任何东西来分离数据。

Answer 2

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

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

每次添加新点时，都会在此新阵列上

。

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

有没有办法让D3迭代我的数据收集，逐点绘制？

2 个答案: