如何在条形图中添加多个工具提示 [英] How to add multiple tool tips to a bar chart

问题描述

我一直在使用带有内置工具提示的D3 svg图表(我相信使用d3提示库).原始代码可以在这里找到: http://bl.ocks.org/Caged/6476579

I've been working with a D3 svg chart with built in tool tips (using the d3-tip library I believe). The original code can be seen here: http://bl.ocks.org/Caged/6476579

大多数情况下，我已经能够成功自定义它，但是我需要添加第二个鼠标悬停效果；因此，当您将鼠标悬停在条形图上时，它不仅会打开工具提示，还会打开图表右上角的另一个提示或图层.

I've successfully been able to customize it for the most part, but I need to add a second mouseover effect; so that when you mouseover a bar it not only opens the tool tip, but also another tip or layer in the upper right corner of the chart.

我尝试执行以下操作，但似乎不起作用.我只是在语法中缺少什么吗?还是这种策略根本行不通?

I tried to do something like the following, but it doesn't seem to work. Am I just missing something in my syntax? Or will this strategy not work at all?

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>";
  })

然后

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency2); })
      .attr("height", function(d) { return height - y(d.frequency2); })
      .on('mouseover', tip.show, tip2.show)
      .on('mouseout', tip.hide, tip2.hide);

该图表仍然有效，但是现在两个工具提示均不显示.

The chart still works, but now neither tool tip shows.

推荐答案

您现在正在做什么...

What you're doing right now...

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

...将不起作用.在selection.on中，第三个参数是捕获:

... will not work. In selection.on, the third argument is the capture:

selection.on(typenames [，listener [，capture]])

selection.on(typenames[, listener[, capture]])

因此，解决方案将tip和tip2都包装在另一个函数中:

Thus, the solution is wrapping both tip and tip2 in another function:

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

这是一个演示(悬停在圆圈上):

Here is a demo (hover over the circle):

var svg = d3.select("svg");

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 20])
  .html("<strong>Frequency2:</strong> <span style='color:red'>foo</span>")

var tip2 = d3.tip()
  .attr('class', 'd3-tip')
  .offset([90, 20])
  .html("<strong>Other Variables:</strong> <span style='color:red'>bar</span>")

svg.call(tip)
svg.call(tip2)

d3.select("circle").on("mouseover", function() {
  tip.show();
  tip2.show();
}).on("mouseout", function() {
  tip.hide();
  tip2.hide();
});

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<svg>
  <circle cx="50" cy="70" r="20" fill="teal"></circle>
</svg>

这篇关于如何在条形图中添加多个工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！