更改工具提示颜色 d3.js

Question

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

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

我知道有很多方法可以添加工具提示，但在这个例子中我想坚持使用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>';
      }
    });

Answer 1

您希望访问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 的颜色倒退了，所以我也修复了上面的问题。