1

私はd3.jsに取り組んでいる初心者です。

時間に関してデータをアニメーション化する方法（色の変更など）を知りたいと思いました。

例えば。たとえば、Monitoring アプリで、クラスター データを US Map に投影しているとします。投影は、円を描き、その状態に応じて赤、緑、または黄色で塗りつぶすことによって行われます。

監視を開始すると、理想的にはすべての円が「緑」の色で塗りつぶされ、その後、クラスタの動作に応じて、時間の経過とともに色が「黄色」または「赤」に変化します。

したがって、これらの色の変化をある時間枠で時間の経過とともに再生する必要がある場合は、どうすればよいでしょうか?

同様の例を教えていただければ、それも役に立ちますか?

ありがとう

4

1 に答える 1

3

Take a look at http://mbostock.github.com/d3/tutorial/bar-2.html. Basically you'll need a redraw function that you'll call whenever you want to update your chart. (Note: there is nothing special about the name of this function, you can call it whatever you want.)

You can use setInterval to create a basic timer, this is the rate that your chart will be updated.

setInterval(function() {
  redraw();  // call the function you created to update the chart
}, 1500);

Then you define redraw to update the chart data. This is a redraw function for a bar chart, but yours would be similar. You would just be adjusting the color based on the data instead of the y position and height.

function redraw() {
  // Update…
  chart.selectAll("rect")
      .data(data)
    .transition()
      .duration(1000)
      .attr("y", function(d) { return h - y(d.value) - .5; })
      .attr("height", function(d) { return y(d.value); }); 
}

これは簡略化されたバージョンであることに注意してください。より完全な例については、上記でリンクしたページを読むことをお勧めします。

于 2012-09-26T00:08:49.073 に答える