我使用setInterval
来更新我的数据:setInterval(function() { update(nextDay(data)) }, 10);
所有圈子,行和文字同时输入,但无法同时退出。
在这里我输入了两次文本,因为我需要显示两种不同类型的文本,我可以在同一个svg中调用两次enter()
文本吗?
这是我的更新功能:
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();
}