d3.js - テキストラベルにリアルタイムデータを表示 d3.js

Question

データベースから 5 秒間隔でデータが取り込まれるときに更新される折れ線グラフがあります。

https://gist.github.com/Majella/5fc4cd5f41a6ddf2df23

日付/時刻 (変数 dateTimeTaken として保存) を表示するグラフの右上隅にラベルを追加し、新しいデータが取り込まれるとこのラベルを更新したいと考えていました。

私はオンラインで検索してきましたが、この例がどこにも見つからないようです - 誰か助けてもらえますか?

Answer 1

それは非常に簡単なはずです。あなたの要点に基づいて、次のようなもの：

d3.json("getdata.php", function(error,data) {
  data.forEach(function(d) {
    d.dateTimeTaken = parseDate(d.dateTimeTaken);
    d.reading = +d.reading;
  });
var maxDate = d3.max( data, function(d) { return d.dateTimeTaken; } 

svg.selectAll( ".timeDisplay" )
  .data( [maxDate] )
  .text( function(d) { return d; } )
  .enter()
  .append("text")
  .attr("class", "timeDisplay" )
  .attr("x", width )
  .attr("y", 0)
  .attr("text-anchor", "end" )
  .text( dateTimeTaken );

これを「updateData」関数に入れます。複数のデータ項目を受け取っている場合、データに対して「d3.max()」呼び出しを実行して、表示する日付を特定する必要がある場合があります。