1

setInterval用来更新我的数据:setInterval(function() { update(nextDay(data)) }, 10);所有圆圈、线条和文本同时输入,但不能同时退出。enter()在这里我输入了两次文本,因为我需要在同一 svg 中显示两种不同类型的文本我可以调用两次文本吗?这是我的更新功能:

function update(data){

    var bcircle = group.selectAll('circle').data(data)
    bcircle.enter().append('circle')
        .attr('cx', function(d) {coords = projection([d.long,d.lat]); return  coords[0]})
        .attr('cy', function(d) {coords = projection([d.long,d.lat]); return  coords[1]})
        .attr('r',  function(d) { return countScale(d.count)})
        .attr("stroke", function(d, i) { return color(d.name, i);}) 
        .attr("stroke-width", 2.3)
        .style('fill', function(d) { 
                if (d.count == 0){ return 'white';}
                if (d.count !== 0){ return color(d.name);}
            });
    bcircle.exit().remove();

    var btime = group.selectAll('line').data(data)
    btime.enter().append("line")
        .attr('x1', function(d) {return timeScale(d.time)})
        .attr("x2", function(d) {return timeScale(d.time)})
        .attr("y1", lineHeight+5)               
        .attr("y2", lineHeight-5)
        .attr("stroke", "black")
        .attr("stroke-width", "5"); 
    btime.exit().remove();  

    var timelb = group.selectAll("text").data(data)
    timelb.enter().append("text")
            .attr('x', function(d) {return timeScale(d.time)})
        .attr('y', lineHeight+20)
        .attr("dy", ".25em")
        .style("text-anchor", "middle")
        .text(function(d) {return time2label(d.time)})
        // .attr("font-family", 'sans-serif')
        // .attr("font-size", 19 + "px")
        // .attr("fill", 'black');      
    timelb.exit().remove();

    timelb.enter().append("text")
        .attr('x', function(d) {coords = projection([d.long,d.lat]); return  coords[0]+20})
        .attr('y', function(d) {coords = projection([d.long,d.lat]); return  coords[1]-5})
        .attr("dy", ".25em")
        .style("text-anchor", "end")
        .text(function(d) { return d.name + ":" + d.count; })
        .attr("font-family", 'sans-serif')
        .attr("font-size", 19 + "px")
        .attr("fill", 'black'); 
    timelb.exit().remove();
}
4

0 回答 0