title: Show values of non-selected paths in tooltip for d3 stacked area charts?
body: <p>I have a d3 stacked area visualization that consists of a main chart (national) and small multiples drawn therefrom (i.e. state charts). <a href="http://plnkr.co/edit/qQrAJKgDm8qTaKHYKoUm?p=preview" rel="nofollow noreferrer">Here's the Plunker for the viz I'm working on</a>.</p>
  
  <p>The tooltip currently displays the x and y values of the selected path. What I'm trying to achieve is this: For the state charts only, I want the tooltip to display the values of the non-selected paths, as well as the value for the selected path.</p>
  
  <p>I've partly managed to achieve this on an earlier version of the visualization that I'm working on. Here's <a href="http://plnkr.co/edit/q6wczPtGrwq0SLI7c0Oj?p=preview" rel="nofollow noreferrer">the Plunker from which I'm trying to adapt the tooltip</a>. Very similar.</p>
  
  <p>This is the code that I've been struggling for several days to integrate into my existing tooltip:</p>
  
  <pre><code>    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 += '&lt;ul class="record-list" &gt;'
      for (var i = 0; i &lt; dataset.length; i++) {
          content += getRecordContent(dataset[i], idx);
      }
      content += '&lt;/ul&gt;';
  
    showTooltip(content, xPosition, yPosition);
  } 
  
  function showTooltip(content) {
  
      d3.select(".tooltip")
  
        .html(content);
      d3.select(".tooltip");//.classed("none", false);
  }
  
  function getRecordContent(obj, pos) {
      return '&lt;li&gt;&lt;span class="record-label"&gt;' + obj.record + '&lt;/span&gt;&lt;span class="record-value"&gt;' + obj.values[pos].value + '&lt;/span&gt;&lt;/li&gt;'
  } 
  
  function getTooltipHeader(data, pos) {
      var html = '&lt;div class="tooltip-label"&gt;&lt;span&gt;' + data.values[pos].x +'&lt;/span&gt;&lt;h3&gt;' + data.record + '&lt;/h3&gt;&lt;/div&gt;';
      return html; 
  }
  </code></pre>
  
  <p>The problems:</p>
  
  <ol>
  <li>I haven't been able to get the non-selected values to display inside my existing tooltip, or even as a separate tooltip.
  
  <ol start="2">
  <li>When mousing over the state charts, the current configuration displays the selected value twice -- once in the tooltip header, and again in <code>&lt;record-list&gt;</code>. I've tested various <code>filter</code> conditions to suppress the value and its label from being displayed in <code>&lt;record-list&gt;</code> if it already appears in <code>&lt;tooltip-header&gt;</code>, but I haven't been successful.</li>
  </ol></li>
  </ol>
  
  <p><a href="http://plnkr.co/edit/qQrAJKgDm8qTaKHYKoUm?p=preview" rel="nofollow noreferrer">Here, again, is the Plunker for the viz I'm working on</a>. 
  <a href="http://plnkr.co/edit/q6wczPtGrwq0SLI7c0Oj?p=preview" rel="nofollow noreferrer">And here's the Plunker from which I'm adapting the tooltip</a></p>
  
  <p>Thanks in advance for any help you're able to offer.</p>
  
  <p><strong>Edit, 29 November 2017:</strong></p>
  
  <p>I've made a little progress; the tooltip does not appear — albeit without any values — when mousing over the dates of 29 January 2009 and 1 March 2009, but not on any other dates:
  <a href="https://i.stack.imgur.com/z9HzP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z9HzP.png" alt="tooltip not working"></a></p>
  
  <p>I'm continuing to work on this, but I'm definitely stuck, and would still appreciate any help.</p>