Highcharts技术问询：为线段而非端点显示Tooltip及多直方图需求

我来帮你搞定这几个D3.js的问题，咱们一步步拆解解决：

1. 给整条线段（而非端点）添加Tooltip #

默认情况下，如果你的事件绑定是针对数据点的，Tooltip只会在端点触发。你需要把事件直接绑定到<line>元素本身，这样鼠标悬停整条线段时都会触发提示。

举个实际的代码例子：

// 先创建Tooltip容器（提前定义好）
const tooltip = d3.select("body").append("div")
  .style("position", "absolute")
  .style("background", "#fff")
  .style("border", "1px solid #ccc")
  .style("padding", "8px")
  .style("opacity", 0);

// 绘制水平线段并绑定Tooltip
svg.selectAll(".bar-segment")
  .data(yourData)
  .enter()
  .append("line")
  .attr("class", "bar-segment")
  .attr("x1", d => xScale(d.xStart))
  .attr("x2", d => xScale(d.xEnd))
  .attr("y1", d => yScale(d.value))
  .attr("y2", d => yScale(d.value))
  .attr("stroke", "steelblue")
  .attr("stroke-width", 3)
  // 绑定鼠标事件到整条线段
  .on("mouseover", function(event, d) {
    tooltip.transition().duration(200).style("opacity", 0.9);
    tooltip.html(`区间: ${d.xStart} - ${d.xEnd}<br>数值: ${d.value}`)
      .style("left", (event.pageX + 10) + "px")
      .style("top", (event.pageY - 30) + "px");
  })
  .on("mouseout", () => {
    tooltip.transition().duration(500).style("opacity", 0);
  });

这样设置后，只要鼠标碰到这条水平线段的任何位置，Tooltip都会正常显示，而不是只在端点触发。

2. 将水平线段与垂直误差棒作为单个标记单元 #

你可以用<g>（组元素）把每个条的水平线段和垂直误差棒包裹起来，这样它们就是一个整体——不仅可以统一绑定事件，后续调整位置或样式也更方便。

代码示例：

// 创建组，每个组对应一个直方图条目
const barGroups = svg.selectAll(".bar-group")
  .data(yourData)
  .enter()
  .append("g")
  .attr("class", "bar-group");

// 在组内添加水平线段
barGroups.append("line")
  .attr("class", "bar-line")
  .attr("x1", d => xScale(d.xStart))
  .attr("x2", d => xScale(d.xEnd))
  .attr("y1", d => yScale(d.value))
  .attr("y2", d => yScale(d.value))
  .attr("stroke", "steelblue")
  .attr("stroke-width", 3);

// 在组内添加垂直误差棒（假设误差范围存在d.error字段）
barGroups.append("line")
  .attr("class", "error-bar")
  .attr("x1", d => (xScale(d.xStart) + xScale(d.xEnd)) / 2) // 取线段中点
  .attr("x2", d => (xScale(d.xStart) + xScale(d.xEnd)) / 2)
  .attr("y1", d => yScale(d.value - d.error))
  .attr("y2", d => yScale(d.value + d.error))
  .attr("stroke", "crimson")
  .attr("stroke-width", 1);

// 给整个组绑定Tooltip，鼠标碰组内任何元素都触发
barGroups.on("mouseover", function(event, d) {
  tooltip.transition().duration(200).style("opacity", 0.9);
  tooltip.html(`区间: ${d.xStart} - ${d.xEnd}<br>数值: ${d.value}<br>误差: ±${d.error}`)
    .style("left", (event.pageX + 10) + "px")
    .style("top", (event.pageY - 40) + "px");
})
.on("mouseout", () => {
  tooltip.transition().duration(500).style("opacity", 0);
});

用<g>包裹后，水平线段和误差棒就成了一个逻辑单元，操作起来更灵活。

3. 在同一图表中绘制多个此类直方图 #

要实现多直方图共存，你可以通过以下两种方式区分：

• 使用不同的y轴比例尺：给第二个直方图单独定义y轴，让它在图表的另一侧或者上下区域显示；
• 添加固定y偏移：给第二个直方图的所有y值加上一个固定数值，让它和第一个直方图在垂直方向上分开；
• 用颜色区分：给不同的直方图设置不同的线段颜色，让用户直观区分。

举个用y偏移的代码例子：

// 假设第二个数据集是secondData，给它的y值加固定偏移
const offset = 5; // 根据你的数据范围调整
const barGroups2 = svg.selectAll(".bar-group-2")
  .data(secondData)
  .enter()
  .append("g")
  .attr("class", "bar-group-2");

// 第二个直方图的水平线段
barGroups2.append("line")
  .attr("class", "bar-line-2")
  .attr("x1", d => xScale(d.xStart))
  .attr("x2", d => xScale(d.xEnd))
  .attr("y1", d => yScale(d.value + offset))
  .attr("y2", d => yScale(d.value + offset))
  .attr("stroke", "orange")
  .attr("stroke-width", 3);

// 第二个直方图的误差棒
barGroups2.append("line")
  .attr("class", "error-bar-2")
  .attr("x1", d => (xScale(d.xStart) + xScale(d.xEnd)) / 2)
  .attr("x2", d => (xScale(d.xStart) + xScale(d.xEnd)) / 2)
  .attr("y1", d => yScale((d.value + offset) - d.error))
  .attr("y2", d => yScale((d.value + offset) + d.error))
  .attr("stroke", "darkorange")
  .attr("stroke-width", 1);

这样两个直方图就会在垂直方向上分开，颜色不同，不会互相重叠。

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