1

私は D3 でのコーディングにかなり慣れていません。私は、ajax 呼び出しから基になるデータを取得し、データ値の変更に基づいてノードのサイズを変更する、ほぼリアルタイムの円パック チャートに取り組んでいます。私が直面している課題は非常に単純である可能性が高いですが、解決策として活用するのに十分な類似の例をオンラインでまだ見つけていません.

このコードを実行すると、データの変更に合わせてテキスト値が実際に適切に渡されていることがわかります。ただし、コードは更新された値を反映するように既存の要素を変更するのではなく、(更新された値を使用して) svg "g" ノードにテキスト タグを追加し続けます。その結果、別の方法では魅力的なバブルの真ん中にレイヤー化されたテキストの混乱が生じます。

私はd3.exit().remove()無駄に使用しようとしました - 私がそれを誤用した可能性があり、実際に適用するのに適切な手法である可能性があります.

2つの特定のことをどのように達成する必要があるかについて、誰かが喜んでガイダンスを提供してくれますか?

1）実用的でない限り、削除+追加ではなく、既存の「テキスト」要素を再利用したいと思います。

2) ページを更新せずに、既存の「テキスト」要素の値を新しいデータで更新したいと考えています。

.js ファイルの完全なコードは次のとおりです。「svg:svg」などの代わりに「svg」を使用できることは承知していますが、このファイルの整理段階にはまだ達していません。

var Devices = {
  setup_devices : function() {
  var r = 500,
    format = d3.format(",d"),
    fill = d3.scale.category10();

  var bubble = d3.layout.pack()
    .sort(null)
    .size([r, r])
    .padding(1.5);

  var chart = d3.select("#device_info").append("svg:svg")
    .attr("width", r)
    .attr("height", r)
    .attr("class", "bubble")
    .append("svg:g")
    .attr("transform", "translate(2, 2)");

  var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
      return "<strong>Device:</strong> <span style='color:red'>" + d.name + "</span>";
    });

  chart.call(tip);

  setInterval(function() {

    console.log("Devices Refreshing");

    $.ajax({
      type: "GET",
      url: "/devices",
      dataType: "json",
      beforeSend: function() {
      },
      error: function( jqXHR, textStatus, thrownError ) {
        return true;
      },
      success: function(data) {
        update(data);
        return true;
      }
    });

    d3.timer.flush();

  }, 2000);


  function update(data) {

    var updated = chart.data([data]).selectAll("g.node")
      .data(bubble.nodes);

    updated.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .attr("data-name", function(d) {
        return d.name;
      })
      .attr("data-device", function(d) {
        return d.device_id;
      })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .append("svg:circle")
        .attr("r", function(d) { return d.r; })
        .style("fill", function(d) { return fill(d.name); })
        .attr("text-anchor", "middle")
        .attr("dy", ".3em")
        .text(function(d) { return d.value + "%" });

    updated.append("svg:text")
      .attr("text-anchor", "middle")
      .attr("dy", ".3em")
      .text(function(d) { return d.value + "%" });

    updated.transition()
      .duration(1000)
      .attr("class", "node")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      });

    updated.select("circle").transition()
      .duration(1000)
      .attr("r", function(d) { return d.r; })
      .text(function(d) { return d.value + "%" });
    }
  }
}
4

1 に答える 1