D3 - 显示所有值的工具提示

【问题标题】：D3 - tooltip to show all valuesD3 - 显示所有值的工具提示
【发布时间】：2018-02-07 14:19:40
【问题描述】：

我这里有一个密码笔 - https://codepen.io/anon/pen/rJWeLP

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

我正在想办法在同一个工具提示中显示不同块的所有值。

因此，当您将鼠标悬停在该列上时，它将显示该列中三个块的 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]);
});

【问题讨论】：

标签： d3.js

【解决方案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);
})

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

// 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]);
            });

【讨论】：