2016-08-22 48 views
2

我在圖表中有兩個數據集,並通過點擊段落(稍後繪製按鈕)切換它們。數據集具有不同的維度,因此我想根據所選數據集在工具提示中替換另一個維度。我可以調整工具提示一次如何在數據集切換後在工具提示中添加數據

.on("mouseover", function(d, i) { 
    var tickDate = d3.select(d3.selectAll(".axis .tick text")[0][i]).data()[0]; 
    console.log (tickDate); 
    var formatDate = RU.timeFormat("%B %Y"); 
    var tooltipDate = formatDate(tickDate); 
    //Get this bar's x/y values, then augment for the tooltip 
    var xPosition = parseFloat(d3. select(this). attr("x")) + ((barWidth - barPadding)/2); 
    var yPosition = parseFloat(d3. select(this). attr("y"))/2 + h/2; 
    //Update the tooltip position and value 
    d3.select("#tooltip") 
     .style("left" , xPosition + "px") 
     .style("top" , yPosition + "px") 
     .select("#value") 
     .text(d + " DIMENSION1"); 
    d3.select("#tooltip") 
     .select("#label") 
     .text(tooltipDate); 
    //Show the tooltip 
    d3.select("#tooltip"). 
     classed("hidden" , false); 
    d3.select(this) 
     .attr("fill", "orange"); 
    }) 

但我無法在切換後刷新它。現在在這兩種情況下都有文字「DIMENSION1」,我的目的是在切換後的文本「DIMENSION2」外觀,並在選擇初始數據集後返回「DIMENSION1」。

這是我的小提琴:這裏https://jsfiddle.net/anton9ov/dw1xp1ux/

回答

1

幾個問題:

創建一個名爲的過渡功能 transition(dataset, dimension)
  • 避免代碼重複

  • 你不更新mouseover事件當你改變你的數據集。於是打電話給你的鼠標懸停功能,每次更新數據

 
    svg.selectAll("rect").on("mouseover", function(d, i) { 
      // Your mouseover function 
     });

看到這個小提琴https://jsfiddle.net/bfz97hdw/ (我也是固定的顏色問題)

相關問題