Javascript 更改工具提示颜色d3.js

我正在尝试使用

src=”在甜甜圈图表上添加工具提示http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js“

我希望当用户切换到不同的甜甜圈时，工具提示的字体颜色会改变

例如，当用户将鼠标悬停在橙色部分上时，字体颜色为橙色。当用户将鼠标悬停在蓝色部分上时，工具提示的字体颜色相应更改为蓝色。 我试图通过在d3.tip（）之后添加if-else语句来实现这一点，但它不起作用。我还创建了一个。 我知道有很多方法可以添加工具提示，但在这个例子中，我想坚持使用

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

var-tip=d3。
提示（）。
attr（'class'，'d3-tip'）。
偏移量（[100,0]）。
html（函数（d）{
如果（d.fruit='Apple'）{
返回“计数：”+d.Count+”；
}else如果（d.fruit==‘香蕉’）{
返回“计数：”+d.Count+”；
}否则{
返回“计数：”+d.Count+”；
}
});

您想访问

d

参数上的

数据

属性，以获取

水果

和

计数

。像这样：

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>';
}

if（d.data.fruit=='Apple'）{
返回“计数：”+d.data.Count+”；
}else if（d.data.fruit==“香蕉”）{
返回“计数：”+d.data.Count+”；
}否则{
返回“计数：”+d.data.Count+”；
}

---

看起来你的

Apple

和

Banana

颜色都是反向的，所以我在上面也做了修改。

用类控制颜色不是更容易吗？所以在css中你会有strong.apple，strong.apple+span{color:red；}谢谢。我想“d”表示“数据”。你能解释一下“d”在这里是什么意思吗？为什么计数在这里是不精确的？我也更新了计数的答案。至于

d

表示

d

对象中除了

数据之外还有更多内容的内容。看起来像是与饼图切片相关的图形值和角度。@newb我一般认为
d
是图表显示数据，
d
中的数据属性可能是图表图形数据。