2016-08-22 23 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/ (我也是固定的颜色问题)

相关问题