javascript - D3 - 按索引访问轴刻度

Question

我在 D3 中绘制了一个直方图。 X 尺度是有序的。
当我用鼠标光标将特定数据悬停在直方图上时，我希望 X 轴上相应刻度文本标签的字体粗细变为粗体。
为此我使用

.on("mouseover", highlightTickCallback)

回调。
hightTickCallback 函数接收相应的数据作为第一个参数，因此我可以通过在 X 尺度域中搜索特定键来计算刻度索引。但现在，当我有刻度索引时，我需要以某种方式访问​​此刻度，但我不明白如何才能做到这一点。

Answer 1

如果你有刻度索引，这样的事情就会起作用:

d3.selectAll(".tick")
.select("text")
.style("font-weight", function(d,i) {return i == yourIndexValue ? 900 : 100})

这将重新设置所有刻度的样式，以便任何不是鼠标悬停值的内容都将具有浅色字体，而鼠标悬停的值将具有粗体字体。请记住，这会将所有刻度收集在一起，因此如果您有多个轴，则需要指定您希望首先将轴刻度放入其中的元素:

d3.select("#axisX")
.selectAll(".tick")
.select("text")
.style("font-weight", function(d,i) {return i == yourIndexValue ? 900 : 100})

您还可以过滤勾选的选择，这可能更有意义，具体取决于您想在鼠标悬停时执行多少操作:

d3.select("#axisX")
.selectAll(".tick")
.select("text")
.filter(function(d,i) {return i == yourIndexValue})
.style("font-weight", 900)