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. 当鼠标悬停在状态图表上时，当前配置会显示所选值两次 - 一次在工具提示标题中，再次显示在<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引入条件以便显示的方法选定的值以粗体显示（从而明确表示它是“已选择”的值，并且避免使用相同的值再次出现在标题中）？

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

1 个答案: