动画中的D3退出 /更新功能

Question

我正在尝试执行一个动画，以显示十个不同点的数据。图形进行编码，以使传感器(通过圆圈显示(会根据一小时内获得的整体数据(条目总数和速度平均值(更改其颜色和尺寸。

通过此条目(过渡不起作用D3(和GapMinder(https://bost.ocks.org/mike/nations/(的模拟中的代码，我已经能够对图表进行动画动画。但是，由于代码的结构，退出和更新功能不起作用。数据中第1个小时中的第一个条目只有一个对象，因此仅绘制一个圆。这个圆圈随着时间的推移而更新，但是没有绘制其他传感器(因此没有更新(。

我正在考虑重新创建第一个空对象，以便每个传感器在动画开始时绘制它们。但是，我想避免这种情况。

代码是这样：

//FUNCTION TO GET THE DATA BY HOUR
function getDataByHour (hour) {
    var allBridges = new Array();
    var found;
    for (b = 0; b < boatsByHour.length; b++){
        bridges.forEach(function(br,i){
            if (boatsByHour[b].sensorID== br.id){
                xy = projection([br.longitude, br.latitude])}
        });
        if (boatsByHour[b].hour == hour){
            found = true;
            bridgeNumber = boatsByHour[b].sensorID;
            allBridges.push({
                "numberBoats": (boatsByHour[b].numberBoats),
                "speed": (boatsByHour[b].speedAvg),
                "bridge": boatsByHour[b].sensorID,
                "longitude": xy[0],
                "latitude": xy[1],
                "hour": boatsByHour[b].hour
            })
        }
    }
    return allBridges;
}
//SENSORS
var sensor = plot.append("g")
    .attr("class","bridges")
    .selectAll(".sensors")
    .data(getDataByHour(timeRange[0]))
    .call(animateSensors)
    .enter()
    .append("circle")
    .attr("class","sensors")
    .attr("cx", function(d,i){return d.longitude})
    .attr("cy", function(d,i){return d.latitude})
    .on("mouseover",function(d){console.log(d)});
sensor.exit().remove();
plot
    .transition()
    .duration(300000)
    .ease(d3.easeLinear)
    .tween("hour", tweenHour)
//FUNCTION THAT UPDATES THE ANIMATION
function animateSensors (sensor){
    sensor
        .attr("r",function(d){return radiusScale(d.numberBoats)})
        .style("fill",function(d){return colorScale(d.speed)});
}
function tweenHour(){
    var hour = d3.interpolateNumber (timeRange[0],timeRange[1]);
    return function(h){
        displayHour(hour(h))}
}
function displayHour(hour) {
    sensor.data(getDataByHour(Math.floor(hour))).call(animateSensors);
}

我尝试了包括Enter((和Exit((的不同方法。如果我添加Enter((并附加" AnimatesEnsors"功能中的圆圈，则绘制所有圆(传感器(。但是，它们没有被更新，因此，即使在exit((。remove((更新中，我也会在SVG中绘制数千个圆圈。

谢谢

Answer 1

好的，现在起作用。我不得调用数据的第一部分(其中只有1个圆而不是总数10(，而是调用具有所有圆圈数据的数据(例如最后一点(：

var sensor = plot.append("g")
        .attr("class","bridges")
        .selectAll(".bridge")
        .data(getDataByHour(timeRange[1])) // instead of getDataByHour(timeRange[0])
        .enter()
        .append("circle")
        .attr("class",function(d){return "bridge " + d.bridge})
        .attr("cx", function(d,i){return d.longitude})
        .attr("cy", function(d,i){return d.latitude})
        .on("mouseover",function(d){console.log(d)});

借助功能tweenhour

，动画启动了

function tweenHour(){
        var hour = d3.interpolateNumber (timeRange[0],timeRange[1]);
        return function(h){
            displayHour(hour(h))}
    }