在 d3 堆积面积图的工具提示中显示未选择路径的值？

Question

我有一个 d3 堆叠区域可视化，它由一个主图表（国家）和从中绘制的小倍数（即州图表）组成。 Here's the Plunker for the viz I'm working on.

工具提示当前显示所选路径的 x 和 y 值。我想要实现的是：仅对于状态图，我希望工具提示显示未选定路径的值以及选定路径的值。

我已经在我正在处理的早期版本的可视化中部分地实现了这一点。这是the Plunker from which I'm trying to adapt the tooltip。非常相似。

这是我几天来一直在努力集成到现有工具提示中的代码：

    paths.on('mousemove', function(d, i) {
            let mousePos = d3.mouse(this);
            d3.select(this).classed('hover', true);
            MouseOverChart(d, dataset, mousePos, xScale);

function MouseOverChart(d, dataset, mousePos, xScale) {
    var xPosition = (d3.event.pageX),
        yPosition = (d3.event.pageY - 28);

  let mouseX = mousePos[0];
  var invertedX = xScale.invert(mouseX),
    bisect = d3.bisector(function(d) { return new Date(d.x); }).left,
        idx = bisect(d.values, invertedX);

    var content = getTooltipHeader(d,idx);
    content += '<ul class="record-list" >'
    for (var i = 0; i < dataset.length; i++) {
        content += getRecordContent(dataset[i], idx);
    }
    content += '</ul>';

  showTooltip(content, xPosition, yPosition);
} 

function showTooltip(content) {

    d3.select(".tooltip")

      .html(content);
    d3.select(".tooltip");//.classed("none", false);
}

function getRecordContent(obj, pos) {
    return '<li><span class="record-label">' + obj.record + '</span><span class="record-value">' + obj.values[pos].value + '</span></li>'
} 

function getTooltipHeader(data, pos) {
    var html = '<div class="tooltip-label"><span>' + data.values[pos].x +'</span><h3>' + data.record + '</h3></div>';
    return html; 
}

问题：

1. 我无法让未选择的值显示在我现有的工具提示中，甚至无法显示为单独的工具提示。
   1. 将鼠标悬停在状态图表上时，当前配置会显示两次选定的值 - 一次在工具提示标题中，另一次在 <record-list> 中。我已经测试了各种filter 条件来禁止在<record-list> 中显示值及其标签（如果它已经出现在<tooltip-header> 中），但我没有成功。

Here, again, is the Plunker for the viz I'm working on。 And here's the Plunker from which I'm adapting the tooltip

提前感谢您提供的任何帮助。

编辑，2017 年 11 月 29 日：

我已经取得了一点进步；将鼠标悬停在 2009 年 1 月 29 日和 2009 年 3 月 1 日的日期上时，工具提示不会出现（尽管没有任何值），但不会出现在任何其他日期：

我正在继续努力，但我肯定被困住了，仍然希望得到任何帮助。

Answer 1

对于那些仍在家里追随的人，我设法解决了这个问题。

这是一个更新的 Plunker：http://plnkr.co/edit/NfMeTpXzXGTxgNFKPFJe?p=preview

相关代码：

    paths.on('mousemove', function(d, i) {
            let mousePos = d3.mouse(this);
            d3.select(this).classed('hover', true);
            MouseOverChart(d, dataset, mousePos, xScale);


function MouseOverChart(d, dataset, mousePos, xScale) {
    //Get this bar's x/y values, then augment for the tooltip
    var xPosition = (d3.event.pageX),
            yPosition = (d3.event.pageY - 28);

  let mouseX = mousePos[0];// + 1;
  var invertedX = xScale.invert(mouseX),
    bisect = d3.bisector(function(d) { return new Date(d.x); }).left,
        idx = bisect(d.values, invertedX);

      function getMonth(date) {
        var month = date.getMonth() + 1;
        return month < 10 ? '0' + month : '' + month; // ('' + month) for string result
      }

      invertedX = ("" + (invertedX.getMonth() + 1)).slice(-2) + '/' + invertedX.getFullYear();
      var selected = (d.values);

      for (var k = 0; k < selected.length; k++) {
        dates[k] = selected[k].x
        dates[k] = ("" + (dates[k].getMonth() + 1)).slice(-2) + '/' + dates[k].getFullYear();
      } 

      idx = dates.indexOf(invertedX);

    var content = getTooltipHeader(d,idx);

    content += '<ul class="record-list" >'
    for (var i = 0; i < dataset.length; i++) {
        content += getRecordContent(dataset[i], idx);

    }
    content += '</ul>';

  showTooltip(content, xPosition, yPosition);
} //closes MouseOverChart function

function getTooltipHeader(data, pos) {
  var hoverdate = data.values[pos].x;
  var invertedxmo = data.values[pos].x;
  var invertedxyr = data.values[pos].x;  

      function getMonth(date) {
        var month = date.getMonth() + 1;
        return month < 10 ? '0' + month : '' + month; // ('' + month) for string result
      }

      hoverdate = ("" + (hoverdate.getMonth() + 1)).slice(-2) + '/' + hoverdate.getFullYear();
      var selected = (d.values);

      for (var k = 0; k < selected.length; k++) {
        dates[k] = selected[k].x
        dates[k] = ("" + (dates[k].getMonth() + 1)).slice(-2) + '/' + dates[k].getFullYear();
      } 
      invertedxmo = ("" + (invertedxmo.getMonth() + 1)).slice(-2) ;
      var selectedmo = (d.values);

      for (var m = 0; k < selectedmo.length; k++) {
        dates[m] = selectedmo[m].x
        dates[m] = ("" + (dates[m].getMonth() + 1)).slice(-2) ;
      }       
      invertedxyr = invertedxyr.getFullYear();

      var monthNames = ["January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"
      ];

    var html = '<div class="tooltip-label"><span>' + monthNames[invertedxmo-1] + " " + invertedxyr + '</span><h3>' + " "  + data.state + '<br/>' +  data.record.toLowerCase() + " " + numFormat(data.values[pos].y) + '</h3></div>';
    return html; 
} //closes getTooltipHeader function

function getRecordContent(obj, pos) {
    return '<li><span class="record-label">' + obj.record + '</span><span class="record-value">' + numFormat(obj.values[pos].y) + '</span></li>'    
} //closes getRecordContent function

和

function showTooltip(content, xPosition, yPosition) {
      tt.html('<span class="record">' + d.state + "</span>" + '<br/>' + '<br/>' + '<span class="dataNum">' +  '</span>' + " " + d.record.toLowerCase() )
         .style('top', d3.event.pageY - 12 + 'px')
        .style('visibility', 'visible')
        .html(content);
}

这段代码可以进行一些清理，但它可以正常工作。

我仍在寻找一种方法来消除所选值的冗余表示。目前，如果您将鼠标悬停在某个区域上，则所选路径的值（在给定月份的二等分处）会同时出现在工具提示的 header div 和它的 record-list div 中。

有没有人建议一种实现方法的方法，也许是一个过滤函数，从record-list 中删除选定的值 - 或者，一种为record-list 引入条件的方法，以便它在粗体字体（从而明确它是“选定”字体，并避免相同的值再次出现在标题中）？