如何让d3-tip在柱状图中始终显示（无需鼠标事件触发）

嘿，这个问题其实很容易搞定！d3-tip默认是靠mouseover/mouseout这类鼠标事件来控制显示隐藏的，咱们只要跳过这些事件，主动调用它的显示方法就行。下面分两种常见场景给你具体说明：

场景1：单个固定位置的tip一直显示 #

如果想要一个tip固定在图表的某个角落（比如左上角），不需要随柱子变化，那直接在初始化完成后调用tip.show()就行：

// 1. 先正常创建和配置你的tip
const tip = d3.tip()
  .attr('class', 'd3-tip')
  .html("这个tip会一直显示在图表里！")
  .offset([-10, 0]); // 调整偏移量，避免和图表元素重叠

// 2. 把tip绑定到svg上
svg.call(tip);

// 3. 直接调用show方法，让tip显示出来
// 第一个参数传null（不需要绑定数据），第二个参数传svg节点作为定位基准
tip.show(null, svg.node());

场景2：每个柱子对应的tip始终显示在柱子旁 #

如果需要每个柱子的专属tip一直停留在柱子旁边（就像悬停时的效果，但一直保持），那就在绘制完柱子后，遍历每个柱子调用tip.show()：

// 1. 创建并配置tip，和你原来的逻辑一致
const tip = d3.tip()
  .attr('class', 'd3-tip')
  .html(d => `<strong>数值：</strong>${d.value}`)
  .offset([-15, 0]); // 向上偏移，避免和柱子重叠

svg.call(tip);

// 2. 绘制你的柱状图（这里是示例代码，替换成你自己的柱子绘制逻辑）
const bars = svg.selectAll('.bar')
  .data(yourData)
  .enter()
  .append('rect')
  .attr('class', 'bar')
  .attr('x', d => xScale(d.category))
  .attr('y', d => yScale(d.value))
  .attr('width', xScale.bandwidth())
  .attr('height', d => height - yScale(d.value));

// 3. 遍历每个柱子，主动调用tip.show()
// 这里的d是当前柱子的数据，this是柱子的DOM元素，tip会自动定位到柱子附近
bars.each(function(d) {
  tip.show(d, this);
});

注意事项 #

• 一定要移除原来绑定的鼠标事件（比如bars.on('mouseout', tip.hide)），不然鼠标移开时tip还是会被隐藏！
• 如果后续需要更新图表数据，记得在更新柱子后重新调用tip.show()，这样tip的内容和位置会同步更新。
• 可以通过tip.offset()调整tip的位置，确保它显示在你想要的地方（比如柱子上方、右侧等）。

内容的提问来源于stack exchange，提问作者nikamanish