Javascript 如何向条形图添加多个工具提示

我一直在使用内置工具提示的D3 svg图表（我相信使用D3提示库）。原始代码可以在这里看到：

我已经成功地定制了它的大部分，但我需要添加第二个鼠标悬停效果；因此，当您将鼠标悬停在一个条上时，它不仅会打开工具提示，还会打开图表右上角的另一个提示或图层

我试着做如下的事情，但似乎不起作用。我只是在语法上遗漏了什么吗？还是这一策略根本不起作用

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Frequency2:</strong> <span style='color:red'>" + d.frequency2 + "</span>";
  })

//adding second tool tip
var tip2 = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-40, 0])
  .html(function(d) {
    return "<strong>Other Variables:</strong> <span style='color:red'>" + d.frequency2 + "</span>";
  })

---

图表仍然有效，但现在两个工具提示都没有显示。

您现在正在做什么

.on('mouseover', tip.show, tip2.show)

。。。这是行不通的。在选择中，第三个参数是：

selection.on（typenames[，listener[，capture]]）

因此，解决方案将

tip

和

tip2

包装在另一个函数中：

.on("mouseover", function() {
    tip.show();
    tip2.show();
})

下面是一个演示（将鼠标悬停在圆圈上）：

var svg=d3.选择（“svg”）；
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,20]）
.html（“Frequency2:foo”）
var tip2=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[90,20]）
.html（“其他变量：bar”）
svg.call（提示）
svg.call（tip2）
d3.选择（“圆圈”）。打开（“鼠标悬停”，函数（）{
tip.show（）；
tip2.show（）；
}).on（“mouseout”，函数（）{
tip.hide（）；
tip2.hide（）；
});
.d3提示{
线高：1；
字体大小：粗体；
填充：12px；
背景：rgba（0,0,0,0.8）；
颜色：#fff；
边界半径：2px；
}
您现在正在做的事情

.on('mouseover', tip.show, tip2.show)

。。。这是行不通的。在

选择中，第三个参数是：

selection.on（typenames[，listener[，capture]]）

因此，解决方案将

tip

和

tip2

包装在另一个函数中：

.on("mouseover", function() {
    tip.show();
    tip2.show();
})

下面是一个演示（将鼠标悬停在圆圈上）：

var svg=d3.选择（“svg”）；
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,20]）
.html（“Frequency2:foo”）
var tip2=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[90,20]）
.html（“其他变量：bar”）
svg.call（提示）
svg.call（tip2）
d3.选择（“圆圈”）。打开（“鼠标悬停”，函数（）{
tip.show（）；
tip2.show（）；
}).on（“mouseout”，函数（）{
tip.hide（）；
tip2.hide（）；
});
.d3提示{
线高：1；
字体大小：粗体；
填充：12px；
背景：rgba（0,0,0,0.8）；
颜色：#fff；
边界半径：2px；
}

谢谢你，杰拉尔多。它看起来应该可以工作，但我遇到了一个奇怪的错误，没有工具提示显示出来。我看到：
uncaughttypeerror:undefined at Function.（svg7-2.html:105）at Function.tip.show（d3.tip.v0.6.3.js:33）at SVGRectElement.（svg7-2.html:152）at SVGRectElement.\uu onmouseover（d3.v3.min.js:1）
您可以看到我的代码片段是有效的。因此，您有一个不同的问题，与您提出的问题无关。是的，您的示例确实有效！但是否有可能在执行过程中无法访问该数据？我相信错误是指无法在该点读取frequency2变量。对吗？您可以rhaps使用包含的数据而不是插入的文本来尝试您的示例，看看它是否仍然有效？如果有帮助的话，我也可以发布我的完整代码！请不要编辑问题：这个问题已经得到了回答。用您的新问题发布另一个问题。谢谢Gerardo。它似乎应该有效，但我“我得到一个奇怪的错误，没有工具提示显示。我看到：
uncaughttypeerror:undefined at Function.（svg7-2.html:105）在Function.tip.show（d3.tip.v0.6.3.js:33）在SVGRectElement.（svg7-2.html:152）在SVGRectElement.（d3.v3.min.js:1）上无法读取未定义的属性'frequency2'
您可以看到我的代码片段是有效的。因此，您有一个不同的问题，与您提出的问题无关。是的，您的示例确实有效！但是否有可能在执行过程中无法访问该数据？我相信错误是指无法在该点读取frequency2变量。对吗？您可以rhaps使用包含的数据而不是插入的文本来尝试您的示例，看看它是否仍然有效？如果有帮助的话，我也可以发布我的完整代码！请不要编辑问题：这个问题已经得到了回答。用新问题发布另一个问题。