nvd3 tooltip not showing up after changing dataset

问题:

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.

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.

Any suggestion would be much appreciated.

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

回答1:

Turned out I just needed to reload my chart. Adding

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

to the beginning of loadChart worked!