D3-工具提示显示所有值

Question

我在这里有一个codepen -https：//codepen.io/anon/pen/rjwelp

它是带有工具提示的堆叠的蝙蝠图，当您悬停在不同的块上时，它显示了该块的值。

我正在尝试考虑一种在同一工具提示中显示不同块的所有vlaues的方法。

因此，当您悬停在列上时，它将显示该列中三个块的3个值。

可以使用我构建SVG的当前方式来执行此操作。

.on("mouseover", function() { tooltip.style("display", null); })
.on("mouseout", function() { tooltip.style("display", "none"); })
.on("mousemove", function(d) {
    let xPosition = d3.mouse(this)[0];
    let yPosition = d3.mouse(this)[1];
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d[1] - d[0]);
});

Answer 1

我要做的就是创建一个单独的工具提示数组。 查看您的代码，看来您的工具提示是列中每个矩形的高度，所以我做了这样的事情：

// This is a messy way to build the tooltip array
var tooltips = [];
stackedSeries.forEach((column) =>{
  let yValues = [];
  column.forEach((point) =>{
    yValues.push(point[1]);
  });
  yValues.sort((a, b) =>{return a - b}) 
  for(let i = 0; i < yValues.length; i++){
    if(i == 0)
      continue;    
    yValues[i] = yValues[i] - yValues[i-1];
  }
  tooltips.push(yValues);
})

之后，您可以通过在mousemove函数中添加i参数并使用我们刚刚创建的数组来查看列中的所有工具提示。

// Use this for your mousemove function
             function(d,i) {
                let xPosition = d3.mouse(this)[0];
                let yPosition = d3.mouse(this)[1];
                tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
                tooltip.select("text").text(tooltips[i]);
            });