Javascript D3工具提示显示嵌套数据集中的值

在从我提出的另一个图表中创建图表之后，通过研究包含如何平分嵌套数组信息的图表，我丰富了我的图表，使之能够缩放和响应

我是如此接近完成它，只是少了一些我认为会容易得多的东西。我现在被工具提示卡住了。理想的效果是，当鼠标悬停在图表上时，工具提示会出现，并显示当前日期、行名称和行值。我尝试了很多东西，但都没有达到预期的效果

此外，我不确定二等分。我做得对吗？将原始数据集转换为嵌套数组，然后再次对其进行二分操作。这是正确的方法还是使用原始数据集是安全的

我正在寻找故障保护，以创建在其他情况下也适用的工具提示-不仅仅是这个特定的图表，所以任何建议和/或建议都是非常受欢迎的

我的工具提示代码如下所示：

var mousemoveFunc = function(d, i) {
      var d, d0, d1, i, x0, left, mouse, top;
      x0 = xz.invert(d3.mouse(this)[0]);
      ds = dataGroup.map(function(e) {
        var i = bisectDate(e.values, x0, 1),
            d0 = e.values[i - 1],
            d1 = e.values[i];
        return d = x0 - d0.date > d1.date - x0 ? d1 : d0;
        }); 

      mouse = d3.mouse(svg.node()).map(function(d) {
        return parseInt(d);
      });

      left = Math.min(containerwidth, mouse[0]+margin.left+margin.right);
      top = Math.min(containerheight, mouse[1]+margin.top+margin.right);

      tooltip.data(ds).classed('hidden', false).attr('style', 'left:' + left + 'px;top:' + top + 'px;margin-top:' + (-margin.top) + 'px;').html(function(d,i) { 

        for (var i = 0; i < ds.length; i++){
            if (ds[i].date === d.date){
              return ds[i].name + ' ' + ds[i].value;
            }
          }
      });
    };

var mousemoveFunc=函数（d，i）{
变量d，d0，d1，i，x0，左，鼠标，顶部；
x0=xz.invert（d3.mouse（this）[0]）；
ds=dataGroup.map（函数（e）{
var i=平分日期（e.值，x0，1），
d0=e.值[i-1]，
d1=e.值[i]；
返回d=x0-d0.date>d1.date-x0？d1:d0；
}); 
mouse=d3.mouse（svg.node（））.map（函数（d）{
返回parseInt（d）；
});
left=Math.min（容器宽度，鼠标[0]+边距。left+边距。right）；
top=Math.min（containerheight，鼠标[1]+边距。top+margin.right）；
tooltip.data（ds）.classed（'hidden'，false）.attr（'style'，'left:'+left+'px；top:'+top+'px；margin top:'+（-margin.top）+'px；'））.html（函数（d，i）{
对于（变量i=0；i

…我几乎可以肯定，在工具提示上重新附加数据（ds）是错误的，但这是我能够显示结果的唯一方法

我制作了以下小提琴：

---

：/现在我正在写这篇文章，我刚刚意识到在单个元素上附加数据是完全错误的，因为函数（d）只能运行一次。

以下是我对您的

mousemove

函数的实现：

var mousemoveFunc = function(d, i) {

  var x0 = xz.invert(d3.mouse(this)[0]);

  var lastDate,
      ds = dataGroup.map(function(e) { 
        var i = bisectDate(e.values, x0, 1),
            d0 = e.values[i - 1],
            d1 = e.values[i];

        var d = x0 - d0.date > d1.date - x0 ? d1 : d0;

        lastDate = d.date;
        return e.key + " " + d.value;
      });

  var left = d3.event.x,
      top = d3.event.y;      

  tooltip
    .html(lastDate.toString() + "<br/>" + ds.join("<br/>"))
    .classed('hidden', false)
    .style('left', left + 'px')
    .style('top', top + 'px');

};

var mousemoveFunc=函数（d，i）{
var x0=xz.invert（d3.mouse（this）[0]）；
var lastDate，
ds=dataGroup.map（函数（e）{
var i=平分日期（e.值，x0，1），
d0=e.值[i-1]，
d1=e.值[i]；
var d=x0-d0.date>d1.date-x0？d1:d0；
lastDate=d.date；
返回e.key+“”+d.value；
});
var left=d3.event.x，
top=d3.event.y；
工具提示
.html（lastDate.toString（）+“
”+ds.join（“
”）
.classed（'hidden'，false）
.style（'left'，left+'px'）
.style（'top'，top+'px'）；
};

---

更新。

这里有一些有趣的选项。首先，当您将鼠标悬停在点附近时，可以显示工具提示。或者，您可以使用一个图标来显示“最近的”工具提示。或者，你可以做一个“连续的工具提示”，比如。我将在下面回答最简单的方法。@Mark，实际上我要找的是在我已经显示的工具提示中显示结果-即工具提示应该跟随鼠标光标并在那里显示结果。编辑：为了让它更清晰：在同一个工具提示中同时显示所有行的值。我理解，只是想指出您的选项…@马克谢谢！实际上，下一步还将添加一条垂直线并显示点，如第二个示例中所示，但是，从我尝试的一些事情来看，缩放功能将其弄糟。如果这是一件容易实现的事情，请帮助一个溺水的人！与此同时，我提出了一个不同的解决方案，但我也会看看我能从您的代码中学到什么。实施另一个答案中的路线和重点有多容易@史酷特洛德，补充你的台词。点击上面的小提琴链接。@scooterlord，那是另一头野兽。要显示“连续工具提示”；这意味着您可以从该行中推断值，但这些值实际上并不存在于数据中？所需的结果是跟随光标的工具提示，但也有一条带圆圈标记的垂直线，显示相应的数据……因此垂直线应该“捕捉”到x轴值，而不是跟随这些线-我想这比连续线容易得多。