javascript - d3 selectAll.remove() 与 d3.select.remove() 相比是滞后的

Question

为了快速直观地表示我正在谈论的滞后:

http://tedxiao.me/ReachabilityD3/Iteration5/iteration5.html没有延迟。

http://tedxiao.me/ReachabilityD3/Iteration6/iteration6.html有一些滞后。

在这两种情况下，我都从 csv 文件读取数据(在一种情况下，我使用 d3.csv，在另一种情况下我使用 d3.text - 这应该不是问题。)

对于带有滞后的 d3:

var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { return xScale(d.x1); })
.y(function(d) { return yScale(d.y1); });

d3.selectAll("path").remove();

if ( <CASE 1>) {
        d3.csv(<FIRST FILE>, function(mydata) {
            svg.append("path")
            .datum(mydata)
            .attr("d", line);
        });
    d3.csv(<SECOND FILE>, function(mydata) {
        svg.append("path")
        .datum(mydata)
        .attr("class", "line")
        .attr("d", line);
    });
} else { <CASE 2>
    d3.csv(<THIRD FILE>, function(mydata){
        svg.append("path")
        .datum(mydata)
        .attr("class", "line")
        .attr("d", line);
    });
}

对于没有延迟的 d3:

d3.text(<FIRST FILE>, function(text) {
            var data = d3.csv.parseRows(text).map(function(row) {
                return row.map(function(value) {
                    return -value;
                });
            });
            // console.log(data);
            var cliff = -1000;
            data.push(d3.range(data[0].length).map(function() {
                return cliff;
            }));
            data.unshift(d3.range(data[0].length).map(function() {
                return cliff;
            }));
            data.forEach(function(d) {
                d.push(cliff);
                d.unshift(cliff);
            });
            var c = new Conrec,
                xs = d3.range(0, data.length),
                ys = d3.range(0, data[0].length),
                zs = [i],
                width = 300,
                height = 300,
                x = d3.scale.linear().range([0, width]).domain([0,
                    data.length
                ]),
                y = d3.scale.linear().range([height, 0]).domain([0,
                    data[0].length
                ]);

            c.contour(data, 0, xs.length - 1, 0, ys.length - 1, xs,
                ys, zs.length, zs);

上面的代码都是使用 conrec.js 来查找特定 .csv 文件中 z 函数的轮廓。随后的轮廓相当于我通过其他方法直接使用的轮廓(轮廓存储为.csv文件)

    d3.select("svg").remove();
    var test = d3.select("#contour").append("svg")
        .attr("width", width)
        .attr("height", height)
        .selectAll("path")
        .data(c.contourList()) //Contour from conrec.js
        .enter().append("path")
        .style("stroke", "black")
        .attr("d", d3.svg.line()
            .x(function(d) {
                return x(d.x);
            })
            .y(function(d) {
                return y(d.y);
            }));

这些信息是否足以弄清楚为什么其中一种 d3 方法在轮廓之间切换时存在一些滞后？

Answer 1

原因是文件的处理需要一些时间，并且更新是异步进行的，而在正确的情况下，您可以使用已提供的数据进行同步更新。