8

nvd3 を使用して、ajax リクエストを介してデータを受信する単純な折れ線グラフを描画しています。最初の描画リクエストでは完全に機能していますが、再描画では機能していません。同じ描画関数を呼び出してグラフを再描画しますが、異なるデータ + 異なる最大/最小値を使用します。

新しいデータでチャートを再描画すると、「ホバー サークル」は表示されませんが、ツールチップは表示されます。さらに、グラフの凡例をクリックして再描画を強制すると、ホバーが再び表示されますが、yAxis の値は最初に描画されたグラフの値に変更されます。

これまでのところ、チャートを再描画しても古い最大値/最小値が保持されていると想定していますが、「ホバー」効果についてのみです。これまでのところ、一般的なチャートは再描画でも問題ないように見えます-問題はホバーに直面しているだけで、それだけです.

かなりややこしいように聞こえますが、要点を理解していただければ幸いです。

いくつかのコード:

 d3.json(queryurl, function(data2){
  nv.addGraph(function(jsonData) {
    if(chart){
       chart.remove();
    }
    chart = nv.models.lineChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(d3.scale.category10().range());

    chart.xAxis
        .tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d)) 
        });

    chart.yAxis
        .scale()
        .tickFormat(d3.format(''));

    chart.lines.yDomain([maxmin.max,maxmin.min]);

    d3.select('#chart1 #chartsvg')
      .datum(data2)
      .transition().duration(600)
      .call(chart);

    nv.utils.windowResize(chart.update);

});

});
  return chart;}
4

2 に答える 2

4

.empty()再描画する前に svg 要素で使用してみてください。

于 2013-04-26T20:59:04.370 に答える
3

私はNVD3とD3を自分で使い始めたばかりですが、同様のことをしています。私にとってうまくいったのは、データ更新機能をチャート作成機能と分離することです。ただし、以下の注意事項に注意してください...

グラフを作成するには、次のものが必要です。

initGraph = function(url) {
  d3.json(url, function(data) {
    nv.addGraph(function() {
      chart = nv.models.multiBarChart();

      d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
      nv.utils.windowResize(chart.update);

      return chart;
    });
  });
};

そして、それを更新する次の関数：

redrawGraph = function(url) {
  d3.json(url, function(data) {

    d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
  });
};

私はまだ「機能するまでハックする」段階にあるため、これが推奨される解決策であるかどうかはわかりません。redrawGraph()これにより、 (軸の再描画とツールチップを含む)の呼び出し後にチャートのすべての機能が機能します。

警告: これにより、再計算時にティックが誤って計算されることがあります。偽のダニ

于 2013-01-26T22:32:21.823 に答える