D3工具提示显示嵌套数据集中的值 [英] D3 tooltip show values from nested dataset

问题描述

跟进从另一个该线程有关如何将嵌套数组一分为二的信息，我将图表丰富了起来，使其具有可缩放和自适应的特性.

following up the creation of a chart from another question I had raised, and by studying this thread that contains information on how to bisect a nested array, I enriched my chart to zoom-able and resposnive.

我非常接近完成它，只是缺少了一些东西，我认为这会容易得多.我目前停留在工具提示上.将鼠标悬停在图表上并显示当前日期，行名称和行值时，将显示一个工具提示，这是理想的效果.我尝试了很多事情，但无法获得预期的结果.

I am so close to completing it, just a few things missing that I thought would be a lot easier. I am currently stuck at the tooltips. The desired effect is for a tooltip to appear when hovering over the chart and show current date, line names and line values. I tried a lot of things, but can't get the expected result.

此外，我不确定两分法.我做对了吗?原始数据集将转换为嵌套数组，然后进行二等分处理.这是正确的方法吗?还是使用原始数据集会安全吗?

Moreover, I am not sure about the bisection. Am I doing it right? The original dataset is turned to a nested array and then for bisection it is manipulated again. Is this the right way to do it or would it be safe to use the original dataset?

我正在寻找能够在其他情况下也适用的工具提示-不仅限于此特定图表，因此任何建议和/或建议都将受到欢迎.

I am looking for fail-safe to create tooltips that would work in other cases as well - not just this specific chart, so any advice and/or suggestions are more than welcome.

我的工具提示代码如下:

My code for the tooltip is as follows:

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

..我几乎可以肯定，在工具提示上重新附加数据(ds)是错误的，但这是我设法显示结果的唯一方法.

..I am almost certain that it is wrong to reattach data(ds) on the tooltip, but it was the only way I could manage to show results.

我创建了以下小提琴: https://jsfiddle.net/2en21Lqh/4/

I have created the following fiddle: https://jsfiddle.net/2en21Lqh/4/

://现在我正在写这篇文章，我刚刚意识到将数据附加到单个元素上是完全错误的，因为function(d)只能运行一次.

:/ Now that I am currently writing the post, I just realised that attaching data on a single element is totally wrong, since the function(d) would only run once.

推荐答案

这是我对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');

};

更新了小提琴.

这篇关于D3工具提示显示嵌套数据集中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！