javascript - D3JS散点图刷新速度

Question

我想知道是否有办法改变散点图刷新速度？正如您在 link 中看到的那样散点图得到更新，但出现和消失之间的时间间隔不合理，看起来它们是闪烁的点......我尝试将circle.remove()函数移到circle.transition的正上方，但没有什么区别。

下面是刷新函数的相关代码。谢谢!

function updateData() {

    // Get the data again
    data = d3.json("2301data.php", function(error, data) {
    data.forEach(function(d) {
        d.dtg = parseDate(d.dtg);
        d.temperature = +d.temperature;
       // d.hum = +d.hum; // Addon 9 part 3
    });

     // Scale the range of the data again 
     x.domain(d3.extent(data, function(d) { return d.dtg; }));
     y.domain([0, 60]);             

    var svg = d3.select("#chart1").select("svg").select("g");

                svg.select(".x.axis") // change the x axis
            .transition()
            .duration(750)
            .call(xAxis);
        svg.select(".y.axis") // change the y axis
            .transition()
            .duration(750)
            .call(yAxis);
        svg.select(".line")   // change the line
            .transition()
            .duration(750)
            .attr("d", valueline(data));

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

    circle.remove() //remove old dots   

    // enter new circles
        circle.enter()
            .append("circle")
            .filter(function(d) { return d.temperature > 35 })
            .style("fill", "red")   
            .attr("r", 3.5) 
            .attr("cx", function(d) { return x(d.dtg); })
            .attr("cy", function(d) { return y(d.temperature); })

        // Tooltip stuff after this
        .on("mouseover", function(d) {      
            div.transition()
                .duration(500)  
                .style("opacity", 0);
            div.transition()
                .duration(200)  
                .style("opacity", .9);  
            div .html(
                d.temperature + "C" + "<br>" +
                formatTime(d.dtg)) 
                .style("left", (d3.event.pageX + 8) + "px")          
                .style("top", (d3.event.pageY - 18) + "px");})
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
            });

    circle.transition().attr("cx", function(d) { return x(d.dtg); });   
        // exit 
        circle.exit();



    });
}

Answer 1

在运行时查看您的示例，您似乎在 dom 中加载了比可见的更多的圆圈。这是因为您为所有数据添加了圆圈，但随后只为那些满足您设置的过滤条件的数据提供位置。

前几天有一个关于数据过滤与 d3 过滤的相关问题 - Filtering data to conditionally render elements 。如果您不想添加一些句号，请使用数据过滤；如果您想隔离某些元素进行特殊处理(过渡、不同样式等)，请使用 d3.filter。

目前，一旦添加了所有圆圈，您就会过滤 d3 选择，但就您而言，我建议在到达该阶段之前过滤数据是最好的(正如其他问题中其他人所建议的那样) 。这可能会使其运行得更快(但从示例的外观来看，您也受到数据库更新的支配？)

data = data.filter (function(d) { return d.temperature > 35; }); // do filtering here
var circle = svg.selectAll("circle").data(data);

circle.exit().remove() //remove old dots   

// enter new circles
    circle.enter()
        .append("circle")
        .style("fill", "red")   
        .attr("r", 3.5) 
        .attr("cx", function(d) { return x(d.dtg); })
        .attr("cy", function(d) { return y(d.temperature); })
        ...

PS。您尝试使用circle.remove() 和circle.exit() 执行的操作有点令人困惑。 Circle.remove() 将删除所有现有的圈子(甚至是存在且具有新数据的圈子)，最后的circle.exit() 将不起作用。我只需用circle.exit().remove() 来替换您调用的两个电话。

此外，没有按键功能 - https://bost.ocks.org/mike/constancy/ - 在您的 .data() 调用中，您可能会发现点移动了一点。如果您的数据点有 id，请使用它们。

var circle = svg.selectAll("circle").data(data, function(d) { return d.id; /* or d.dtg+" "+d.temperature; if no id property */});