更改数据集后未显示 nvd3 工具提示 [英] nvd3 tooltip not showing up after changing dataset

问题描述

我提供了一个下拉列表，供用户选择 nvd3 图表可视化的数据集.一切正常，除了在数据集更改后工具提示不会显示.奇怪的是，如果我关闭某些内容或在堆叠和分组之间切换(我使用的是 multiBarChart 模型)，工具提示会再次开始显示.

I'm providing a dropdown list for the user to choose which dataset the nvd3 chart is visualizing. Everything works fine, except the tooltip wouldn't show up after the dataset is changed. The strange thing is if I switch off something or switch between stacked and grouped (I'm using the multiBarChart model), the tooltip starts showing up again.

我一定遗漏了一些步骤，但我似乎无法弄清楚它是什么.我试过调用 dispatch.stateChange(state) 和 dispatch.stateChange(state) 但它们似乎没有帮助.

I must be missing some steps, but I can't seem to figure out what it is. I've tried calling dispatch.stateChange(state) and dispatch.stateChange(state) but they don't seem to help.

任何建议将不胜感激.

这是我用来重新加载图表的简单 HTML:

This is the simple HTML that I'm using to reload the graphs:

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

以下是我的主要代码的其余部分.它基本上取自示例，并没有太大区别:

Following is the rest of my main code. It's basically taken from the examples and not too different:

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;
  });
}

推荐答案

原来我只需要重新加载我的图表.添加

Turned out I just needed to reload my chart. Adding

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

到 loadChart 开始工作！

to the beginning of loadChart worked!

这篇关于更改数据集后未显示 nvd3 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！