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

您想访问data参数上的d媒体资源，以获取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颜色向后倾斜，所以我也修正了上面的颜色。

更改工具提示颜色d3.js

1 个答案: