在d3中线经过的不同轴上添加工具提示

<script src="https://d3js.org/d3.v7.min.js"></script>

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const xScale = d3.scaleLinear()
  .domain([0, data.length])
  .range([0, width]);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .call(yAxis);

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) { return xScale(i); })
  .attr("cy", function(d) { return yScale(d); })
  .attr("r", 5)
  .attr("fill", "steelblue");

const tooltip = d3.tip()
  .attr("class", "tooltip")
  .html(function(d) { return "Value: " + d; });

svg.call(tooltip);

svg.selectAll("circle")
  .on("mouseover", tooltip.show)
  .on("mouseout", tooltip.hide);

.tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}