javascript - 在 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. 我无法将未选定的值显示在现有的工具提示中，甚至无法作为单独的工具提示显示。
2. 当鼠标悬停在状态图上时，当前配置会显示所选值两次 - 一次在工具提示标题中，另一次在 <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 中> 分区。

有没有人建议一种实现过滤函数的方法，该函数可以从记录列表中删除选定的值，或者引入记录条件的方法-list 以便以粗体显示所选值(从而明确它是“所选”值，并避免相同的值再次出现在标题中)？