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 */});

Answer 2

感谢mgraham，问题解决了。！以下是修改后的代码，以防其他人需要它。

function updateData() {

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

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

    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));


    data = data.filter (function(d) { return d.temperature > 35; }); 

    var circle = svg.selectAll("circle").data(data, function(d) { return d.dtg+" "+d.temperature;});
    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); })

    // 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); });   


    });
}         

</script>