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

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

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

---

这是我的小提琴：

这里有几个问题：

• 通过创建为转换调用的函数

  转换（数据集、维度）

  避免代码重复

• 更改数据集时，不会更新

  mouseover

  事件。因此，每次更新数据时都要调用mouseover函数

svg.selectAll（“rect”）。打开（“鼠标悬停”，函数（d，i）{ //你的鼠标悬停功能 }); 看到这把小提琴了吗 （我还解决了颜色问题）

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