Javascript 根据悬停的对象更改D3工具提示背景色

我试图使用D3提示库创建一个D3工具提示，它根据悬停元素的背景颜色更改颜色。以下是我到目前为止的情况：

类应用程序扩展了React.Component{
构造器（道具）{
超级（道具）；
this.state={
图表类型：“阴影”
}
}
drawLegend（hexBorderColor、fontColor）{
var EFFLENDGE=d3。选择（'g.legend'）
var heatScale=d3.scaleQuantize（）.domain（[0,1]）.range（['#1147FF'，'#86D8FF'，'#fff67'，'#FF7D11'，'#F30000']））
var hexbin=d3.hexbin（）
.半径（1.5）
.x（d=>d.key[0]）
.y（d=>d.key[1]）；
const legendHoverText=['Bot 20%，'20%-40%，'40%-60%，'60%-80%，'Top 20%']；
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-1，0]）
.html（（d，i）=>`${legendHoverText[i]}
`）
effLegend.call（提示）
//绘制5个彩色六边形（在此处添加tip.show和.hide）
effLegend.selectAll（'path'））
.data（热量表.range（））
.enter（）.append（'path'）
.attr（“transform”，（d，i）=>`translate（${10+（1+i*2）}，10）`）
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）
.attr（'d'，hexbin.hexagon（0））
.transition（）.持续时间（1000）
.attr（'d'，hexbin.hexagon（1.1））
.attr（'stroke'，hexBorderColor）
.attr（'stroke-width'，0.175）
.style（'fill'，d=>d）
// =====
}
componentDidMount（）{
常量图表=d3。选择（“.chart”）
.attr（'宽度'，325）
.attr（'height'，300）
.attr（“视图框”、“0,0”、“+30+”、“+30+”）
这个.drawLegend（“#AAA”和“#EEE”）
}
render（）{
console.log（this.state.chartType）；
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
/*D3工具提示*/
/* ========== */
.d3提示{
线高：.5；
字体大小：粗体；
填充：0px 8px；
/*背景：rgba（125,125,25,0.8）*/
颜色：#444；
边界半径：10px；
边框：2px实心#444；
}
/*为工具提示创建一个小三角形延长线*/
.d3提示：之后{
框大小：边框框；
显示：内联；
字体大小：10px；
宽度：100%；
线高：1；
颜色：蓝色；
内容：“\25BC”；
位置：绝对位置；
文本对齐：居中；
}
/*以不同方式设置向北工具提示的样式*/
第三点提示n：之后{
保证金：-1px0；
最高：100%；
左：0；
}
/*======*/

看在上帝的份上工作！
最简单的解决方案就是选择
d3.tip
div并将背景颜色设置为绑定的基准：

d3.select(".d3-tip").style("background-color", d);

以下是更新的代码：


类应用程序扩展了React.Component{
构造器（道具）{
超级（道具）；
this.state={
图表类型：“阴影”
}
}
drawLegend（hexBorderColor、fontColor）{
var EFFLENDGE=d3。选择（'g.legend'）
var heatScale=d3.scaleQuantize（）.domain（[0,1]）.range（['#1147FF'，'#86D8FF'，'#fff67'，'#FF7D11'，'#F30000']））
var hexbin=d3.hexbin（）
.半径（1.5）
.x（d=>d.key[0]）
.y（d=>d.key[1]）；
const legendHoverText=['Bot 20%，'20%-40%，'40%-60%，'60%-80%，'Top 20%']；
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-1，0]）
.html（（d，i）=>{
d3.选择（“.d3提示”）.样式（“背景色”，d）；
返回`${legendHoverText[i]}
`}）
effLegend.call（提示）
//绘制5个彩色六边形（在此处添加tip.show和.hide）
effLegend.selectAll（'path'））
.data（热量表.range（））
.enter（）.append（'path'）
.attr（“transform”，（d，i）=>`translate（${10+（1+i*2）}，10）`）
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）
.attr（'d'，hexbin.hexagon（0））
.transition（）.持续时间（1000）
.attr（'d'，hexbin.hexagon（1.1））
.attr（'stroke'，hexBorderColor）
.attr（'stroke-width'，0.175）
.style（'fill'，d=>d）
// =====
}
componentDidMount（）{
常量图表=d3。选择（“.chart”）
.attr（'宽度'，325）
.attr（'height'，300）
.attr（“视图框”、“0,0”、“+30+”、“+30+”）
这个.drawLegend（“#AAA”和“#EEE”）
}
render（）{
console.log（this.state.chartType）；
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
/*D3工具提示*/
/* ========== */
.d3提示{
线高：.5；
字体大小：粗体；
填充：0px 8px；
/*背景：rgba（125,125,25,0.8）*/
颜色：#444；
边界半径：10px；
边框：2px实心#444；
}
/*为工具提示创建一个小三角形延长线*/
.d3提示：之后{
框大小：边框框；
显示：内联；
字体大小：10px；
宽度：100%；
线高：1；
颜色：蓝色；
内容：“\25BC”；
位置：绝对位置；
文本对齐：居中；
}
/*以不同方式设置向北工具提示的样式*/
第三点提示n：之后{
保证金：-1px0；
最高：100%；
左：0；
}
/*======*/

看在上帝的份上工作！
一位朋友建议我使用d3提示-你能分享或链接一个我如何自己创建工具提示的示例吗？我正在创建d3图形作为一个组件。这个图形组件经常更新，我这样做的方式是使用svg ref属性。（我相信这种方法允许D3在React上完成所有DOM操作）。出于这个原因，我不想在我的组件中创建元素。@Canovice有几种不同的方法，这一种似乎很简单：