D3 - 访问轴按索引标记

Question

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

.on("mouseover", highlightTickCallback)

回调。
highlightTickCallback函数接收相应的数据作为第一个参数，因此我可以通过搜索X-scale域中的特定键来计算滴答索引。但是现在，当我有滴答索引时，我需要以某种方式访问​​此刻度，我不明白我该怎么做。

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)