javascript - 如何在数据集切换后在工具提示中添加数据

Question

我的图表中有两个数据集，我通过单击段落在它们之间切换(稍后我将在那里绘制按钮)。数据集具有不同的维度，因此我想根据所选数据集在工具提示中相互替换。我可以调整一次工具提示

   .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”。

这是我的 fiddle :https://jsfiddle.net/anton9ov/dw1xp1ux/

Answer 1

这里有几个问题:

• 通过创建调用转换的函数transition(dataset, dimension) 来避免代码重复

• 当您更改数据集时，您不会更新 mouseover 事件。所以每次更新数据的时候调用你的mouseover函数

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

请参阅此 fiddle https://jsfiddle.net/bfz97hdw/(我也解决了颜色问题)