更改工具提示颜色d3.js

Change tooltips color d3.js

本文关键字：d3 js 颜色 工具提示      更新时间：2023-09-26

我正在尝试使用src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"在圆环图上添加工具提示我希望当用户切换到不同的甜甜圈时，工具提示的字体颜色会发生变化。

例如，当用户将鼠标悬停在橙色部分时，字体颜色为橙色。当用户将鼠标悬停在蓝色部分上时，工具提示的字体颜色相应地变为蓝色。我试图通过在d3.tip（）之后添加if-else语句来实现这一点，但它不起作用。我还在这里创建了一个plunker。

我知道有很多方法可以添加工具提示，但在这个例子中，我想坚持使用this "http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"

如果有人能帮上忙，不胜感激！
 var tip = d3.
    tip().
    attr('class', 'd3-tip').
    offset([100, 0]).
    html(function(d) {
      if (d.fruit == 'Apple') {
        return "<strong style = 'color:red'>Count: </strong> <span style='color:red'>" + d.count + '</span>';
      } else if (d.fruit == 'Banana') {
        return "<strong style = 'color:blue'>Count: </strong> <span style='color:blue'>" + d.count + '</span>';
      } else {
        return "<strong style = 'color:orange'>Count: </strong> <span style='color:orange'>" + d.count + '</span>';
      }
    });

您想要访问d参数的data属性以获得fruit和count。像这样：

if (d.data.fruit == 'Apple') {
    return "<strong style = 'color:blue'>Count: </strong> <span style='color:blue'>" + d.data.count + '</span>';
} else if (d.data.fruit == 'Banana') {
    return "<strong style = 'color:red'>Count: </strong> <span style='color:red'>" + d.data.count + '</span>';
} else {
    return "<strong style = 'color:orange'>Count: </strong> <span style='color:orange'>" + d.data.count + '</span>';
}

看起来你的Apple和Banana颜色也颠倒了，所以我也修正了上面的问题。

相关文章：