nvd3工具提示在更改數據集後沒有顯示

Question

我提供了一個下拉列表供用戶選擇nvd3圖表可視化的數據集。一切工作正常，除了數據集更改後不顯示工具提示。奇怪的是，如果我關掉某些東西或在堆疊和分組之間切換（我正在使用multiBarChart模型），則工具提示開始再次顯示。

我必須錯過一些步驟，但我似乎無法弄清楚它是什麼。我試過呼叫dispatch.stateChange（州）和dispatch.stateChange（州）但他們似乎沒有幫助。

任何建議將不勝感激。

這是簡單的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; 
    }); 
} 

Answer 1

原來我只是需要重新加載我的圖表。加入

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

到loadChart工作的開始！