D3JS散點圖刷新速度

Question

我想知道是否可以更改散點圖的刷新速度？ 如您在此鏈接中所見，散點圖已更新，但外觀和消失之間的時間間隔不合理，看起來它們像是閃爍的點...。過渡，但沒有區別。

以下是刷新功能的相關代碼。 謝謝！

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過濾的問題- 過濾數據以有條件地渲染元素 。 如果您不想添加句點，請使用數據過濾；如果要隔離某些元素以進行特殊處理（過渡，不同樣式等），請使用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>