1

この軸のペアはほぼ希望どおりに動作していますが、小さな独特のエラーがあります。

これらのナビゲーション ピルのどれが選択されているかに応じて x 軸の間隔を変更するようにグラフを構成しましたが、変更をレンダリングするには 2 回クリックする必要があります。

ここで少し動作する例を見ることができます: http://jsfiddle.net/zreqz/3/

基本的に、この問題の本質は JavaScript の下部にあるコードにあります。

$("li").on("click", function () {
    $("#chart").empty();
    renderGraph();
});

したがって、手順は次のとおりです。

  1. いずれかの錠剤をクリックします
  2. DOM からグラフをクリアする

  3. グラフを再レンダリングし、アクティブなピルを特定し、それに基づいて x 軸ドメインを形成します。

    getIntervalType = function () {
  if ($("#hours").hasClass("active")) {
    return startTimeHour;
  } else if ($("#days").hasClass("active")) {
    return startTimeDay;
  } else if ($("#months").hasClass("active")) {
    return startTimeMonth;
  }
};

最初のクリックでグラフを正しく再レンダリングするための解決策を知っている人はいますか?

前もって感謝します。

4

1 に答える 1

2

クリックされた要素のクラスは、定義したコールバックが終了するまで更新されません。つまり、renderGraph() が既に呼び出された後です。

クラスを手動で設定すると、この問題を回避できます。

d3.selectAll('li').on('click', function(){
    d3.selectAll('.active').classed('active', false);
    d3.select(this).classed('active', true);
    d3.select('#chart').select('svg').remove();
    renderGraph();
});

http://jsfiddle.net/zreqz/5/

于 2013-09-17T02:36:00.670 に答える