title: Parallel-Coordinates with tooltip
body: <p>I've been using those two libraries (they are the same but the latter uses d3 v5 and has a few added implementations: <a href="https://github.com/syntagmatic/parallel-coordinates" rel="nofollow noreferrer">https://github.com/syntagmatic/parallel-coordinates</a> and <a href="https://github.com/BigFatDog/parcoords-es/blob/master/demo/nutrients.html" rel="nofollow noreferrer">https://github.com/BigFatDog/parcoords-es/blob/master/demo/nutrients.html</a>) for parcoords but in the last 3 days I havent found a way to show a tooltip when over the curves. I want to have the name of the object shown with mouseover but I dont know how to access the lines. I have been trying to call the svg or canvas (I think the lines are drawn there) to give them a .on and create a small label when mouseover accessing the data given to the parcoord but it hasnt been as easy as I just described.
  Here is an example of how my code looks like (its from the demo of the library but my code looks similar just a lil bit heavier):</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;title&gt;Linking to Data Table&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="./parcoords.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;style&gt;
      body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
      /* parcoords */
      #nutrients { height: 600px; width: 98%; }
      #nutrients text { font-size: 10px; }
  &lt;/style&gt;
  &lt;script src="lib/d3.v5.min.js"&gt;&lt;/script&gt;
  &lt;script src="./parcoords.standalone.js"&gt;&lt;/script&gt;
  &lt;script src="lib/underscore.js"&gt;&lt;/script&gt;
  &lt;div id="nutrients" class="parcoords"&gt;&lt;/div&gt;
  &lt;script id="brushing"&gt;
      var parcoords = ParCoords()("#nutrients");
      d3.csv('data/nutrients.csv').then(function(data) {
          var colorList = ['#3b73b9', '#aa71aa', '#ee3224', '#00aeef', '#f8981d',
              '#80bb42', '#aacdef', '#cacec2', '#aaa6ce', '#df9e9d', '#6ab2e7',
              '#ffdd00', '#9ac2b9', '#a7a9ac', '#bbbb42', '#e6a6ce'];
          var groups = _(data).chain()
              .pluck('group')
              .uniq();
          var colorScale = d3.scaleOrdinal().domain(groups).range(colorList);
          var color = function(d) { return colorScale(d.group); };
          parcoords
              .data(data)
              .color(color)
              .hideAxis(['name'])
              .margin({ top: 24, left: 60, bottom: 12, right: 0 })
              .mode("queue")
              .alpha(0.7)
              .render()
              .brushMode("1D-axes");  // enable brushing
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>In this example it would be having the name for example cheese, appear when the mouse is over the respective line. I want it because i have a lot of lines and if i would use an axis for that, the names would overlap eachother and the user wouldnt be able to see them (in case you have another idea on how to do that)</p>
  
  <p>I would be really thankfull if someone could put me out of this misery. Thanks!</p>
  
  <p>edit, i think the lines are created here, ctx being the context 2d of the canvas:</p>
  
  <pre><code>  var singlePath = function singlePath(config, position, d, ctx) {
      Object.keys(config.dimensions).map(function (p) {
        return [position(p), d[p] === undefined ? getNullPosition(config) : config.dimensions[p].yscale(d[p])];
      }).sort(function (a, b) {
        return a[0] - b[0];
      }).forEach(function (p, i) {
        i === 0 ? ctx.moveTo(p[0], p[1]) : ctx.lineTo(p[0], p[1]);
      });
    };
  
    // draw single polyline
    var colorPath = function colorPath(config, position, d, ctx) {
      ctx.beginPath();
      if (config.bundleDimension !== null &amp;&amp; config.bundlingStrength &gt; 0 || config.smoothness &gt; 0) {
        singleCurve(config, position, d, ctx);
      } else {
        singlePath(config, position, d, ctx);
      }
      ctx.stroke();
    };
  </code></pre>