次のデータを含むグラフに円のセットがあり、各円のキーとして日付を使用しています。
data = [
{date: '2012-01-01', amount: 100 },
{date: '2012-01-02', amount: 200 },
{date: '2012-01-03', amount: 300 },
{date: '2012-01-04', amount: 400 },
{date: '2012-01-05', amount: 500 }
]
var circles = container.selectAll("g.circles")
.data(data, function(d){ return d.date; });
// ENTER
circles.enter().append("circle")
.attr("class","live")
.attr("cy", function(d){return yScale(y(d,i)); })
.attr("cx", function(d){return xScale(x(d,i)); })
.transition(500)
.delay(function(d,i){return i*50;})
.style("display",function(d){ return y(d,i) === null ? 'none' : 'inline'; })
.attr("r", radius - 3 )
.attr("fill", "#f7f7f7")
.attr('clip-path','url(#rpm-clip2)')
.each("end", events);
// TRANSITION
d3.transition(circles)
.attr("cy", function(d){return yScale(y(d,i)); })
.attr("cx", function(d){return xScale(x(d,i)); });
次に、次のデータ セットを使用してデータをリロードします。
data = [
{date: '2012-01-01', amount: 200 },
{date: '2012-01-02', amount: 300 },
{date: '2012-01-03', amount: 400 },
]
お気づきのとおり、このデータ セットは短くなっています。欠落している日付を削除してほしいのですが、更新では触れられていません。何か案は?