如何使用堆叠条形图工具提示的D3.js v5访问数组中的特定数据

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

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

const data = [
  { category: "A", value1: 10, value2: 20, value3: 30 },
  { category: "B", value1: 15, value2: 25, value3: 35 },
  { category: "C", value1: 20, value2: 30, value3: 40 }
];

const keys = ["value1", "value2", "value3"];

const stack = d3.stack()
  .keys(keys)
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetNone);

const series = stack(data);

const bars = svg.selectAll("g")
  .data(series)
  .enter()
  .append("g")
  .attr("fill", (d, i) => color(i));

bars.selectAll("rect")
  .data(d => d)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(d.data.category))
  .attr("y", (d) => yScale(d[1]))
  .attr("height", (d) => yScale(d[0]) - yScale(d[1]))
  .attr("width", xScale.bandwidth());

const tooltip = d3.tip()
  .attr("class", "tooltip")
  .html((d) => d[1] - d[0]);

svg.call(tooltip);

bars.selectAll("rect")
  .on("mouseover", tooltip.show)
  .on("mouseout", tooltip.hide);