0

nvd3 チャートが視覚化するデータセットをユーザーが選択するためのドロップダウン リストを提供しています。データセットが変更された後にツールチップが表示されないことを除いて、すべて正常に機能します。奇妙なことに、何かをオフにしたり、積み上げとグループ化を切り替えたりすると (私は multiBarChart モデルを使用しています)、ツールチップが再び表示され始めます。

いくつかの手順が欠落しているに違いありませんが、それが何であるかを理解できないようです。dispatch.stateChange(state)とdispatch.stateChange( state) を呼び出してみましたが、役に立たないようです。

どんな提案でも大歓迎です。

これは、グラフをリロードするために使用している単純な HTML です。

<form id="myForm">
  <select id="selectTable" onChange="loadChart(this.value)">
  </select>
</form>

以下は、私のメインコードの残りの部分です。それは基本的に例から取られ、それほど違いはありません:

function loadChart(TABLE_NAME) {

  var x_metric = getXMetric(json, TABLE_NAME);
  var graphNames = getMetricNames(TABLE_NAME);

  console.log(graphNames);

  // pack everything into toGraph
  d3.csv(getCSVRequest(TABLE_NAME, graphNames), function(data)
    {
      // remove x-metrics from graphNames if it's there
      for (var i = 0; i < graphNames.length; i++) {
        if (x_metric == graphNames[i]) {
          graphNames.splice(i, 1);
          break;
        }
      }

      var toGraph = initToGraph(graphNames);

      // get rid of last empty line
      if (data[data.length-1].TIME == "") {
        data = data.splice(0, data.length-1);
      }

      // parse time if it exists
      if (x_metric == "TIME") {
        for (var i = 0; i < data.length; i++) {
          data[i]["TIME"] = parseTime(data[i]["TIME"]);
        }
      }

      // make sure we're sorting by the x_metric
      if (x_metric != "TIME") {
        data.sort(function(a,b) {
          a[x_metric] = +a[x_metric];
          b[x_metric] = +b[x_metric];

          if (a[x_metric] < b[x_metric]) {
            return -1;
          } else if (a[x_metric] > b[x_metric]) {
            return 1;
          } else {
            return 0;
          }
        });
      }

      for (var i = 0; i < data.length; i++) {
        var d = data[i];
        for (var j = 0; j < graphNames.length; j++) {
          if (d[graphNames[j]] != "") {
            var tempMap = {};
            tempMap["x"] = +d[x_metric];
            tempMap["y"] = +d[graphNames[j]];
            toGraph[j]["values"].push(tempMap);
          } 
        }
      }

      createChart(TABLE_NAME, toGraph, x_metric);
    }); 
}

function createChart(name, toChart, x_metrics) {
  nv.addGraph(function() {
      var chart = nv.models.multiBarChart();

      chart.multibar
        .hideable(true);

      chart.reduceXTicks(true).staggerLabels(true);

      chart.xAxis
          .showMaxMin(true);

      if (x_metrics == "TIME") {
        chart.xAxis.tickFormat(function(d) {
          var time = new Date(d);
          var toReturn;
          var year = time.getFullYear() - 2000; // assume day will be past 2000 (and hopefully before 3000....)
          if (time.getMinutes() < 10)
            toReturn = time.getMonth() + "/" + time.getDate() + "/" + year +
              " " + time.getHours() + ":0" + time.getMinutes();
          else
            toReturn = time.getMonth() + "/" + time.getDate() + "/" + year +
              " " + time.getHours() + ":" + time.getMinutes();
          return toReturn;
        });
      }

      chart.yAxis
        .tickFormat(d3.format(',.1f'));

      d3.select('#chart svg')
          .datum(toChart)
        .transition().duration(500).call(chart);


      return chart;
  });
}
4

1 に答える 1

1

チャートをリロードする必要があることがわかりました。追加する

document.getElementById("chart").innerHTML = "<svg></svg>";

loadChart の最初まではうまくいきました!

于 2013-07-19T18:37:55.797 に答える