setInterval
私は自分のデータを更新するために使用します:setInterval(function() { update(nextDay(data)) }, 10);
すべての円、線、テキストを同時に入力しましたが、同時に終了することはできません。enter()
ここでは、同じ svg 内のテキストに2 回呼び出すことができますか? ここに私の更新機能があります:
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();
}