Cartesian dropline support

Draw droplines to the x and y axes on hover if the option is enabled and we're not on 'compare' hovermode.

Author: rpaskowitz

src/components/dragelement/unhover.js

@@ -41,6 +41,7 @@ unhover.raw = function unhoverRaw(gd, evt) {
     }
 
     fullLayout._hoverlayer.selectAll('g').remove();
+    fullLayout._hoverlayer.selectAll('line').remove();
     gd._hoverdata = undefined;
 
     if(evt.target && oldhoverdata) {

src/plot_api/plot_config.js

@@ -48,6 +48,9 @@ module.exports = {
     // new users see some hints about interactivity
     showTips: true,
 
+    // display droplines on cartesian graphs
+    showDroplines: false,
+
     // enable axis pan/zoom drag handles
     showAxisDragHandles: true,
 

src/plots/cartesian/graph_interact.js

@@ -563,6 +563,9 @@ function hover(gd, evt, subplot) {
     // rotate the labels so they don't overlap
     var rotateLabels = hovermode === 'y' && searchData.length > 1;
 
+    var oldhoverdata = gd._hoverdata,
+        newhoverdata = [];
+
     hoverData.sort(function(d1, d2) { return d1.distance - d2.distance; });
 
     var bgColor = Color.combine(
@@ -577,16 +580,23 @@ function hover(gd, evt, subplot) {
         container: fullLayout._hoverlayer,
         outerContainer: fullLayout._paperdiv
     };
+
+    if(gd._context.showDroplines && hoverChanged(gd, evt, oldhoverdata)) {
+        var droplineOpts = {
+            hovermode: hovermode,
+            container: fullLayout._hoverlayer,
+            outerContainer: fullLayout._paperdiv
+        };
+        createDroplines(hoverData, droplineOpts);
+    }
+
     var hoverLabels = createHoverText(hoverData, labelOpts);
 
     hoverAvoidOverlaps(hoverData, rotateLabels ? 'xa' : 'ya');
 
     alignHoverText(hoverLabels, rotateLabels);
 
     // lastly, emit custom hover/unhover events
-    var oldhoverdata = gd._hoverdata,
-        newhoverdata = [];
-
     // pull out just the data that's useful to
     // other people and send it to the event
     for(itemnum = 0; itemnum < hoverData.length; itemnum++) {
@@ -818,8 +828,41 @@ fx.loneUnhover = function(containerOrSelection) {
             d3.select(containerOrSelection);
 
     selection.selectAll('g.hovertext').remove();
+    selection.selectAll('line.dropline').remove();
 };
 
+function createDroplines(hoverData, opts) {
+    var hovermode = opts.hovermode,
+        container = opts.container;
+
+    if(hovermode !== 'closest') return;
+    var c0 = hoverData[0];
+    var x = (c0.x0 + c0.x1) / 2;
+    var y = (c0.y0 + c0.y1) / 2;
+    var xOffset = c0.xa._offset;
+    var yOffset = c0.ya._offset;
+    container.selectAll('line.dropline').remove();
+    container.append('line')
+        .attr('x1', xOffset + (c0.ya.side === 'right' ? c0.xa._length : 0))
+        .attr('x2', xOffset + x)
+        .attr('y1', yOffset + y)
+        .attr('y2', yOffset + y)
+        .attr('stroke-width', 3)
+        .attr('stroke', c0.color)
+        .attr('stroke-dasharray', '5,5')
+        .attr('class', 'dropline');
+
+    container.append('line')
+        .attr('x1', xOffset + x)
+        .attr('x2', xOffset + x)
+        .attr('y1', yOffset + y)
+        .attr('y2', yOffset + c0.ya._length)
+        .attr('stroke-width', 3)
+        .attr('stroke', c0.color)
+        .attr('stroke-dasharray', '5,5')
+        .attr('class', 'dropline');
+}
+
 function createHoverText(hoverData, opts) {
     var hovermode = opts.hovermode,
         rotateLabels = opts.rotateLabels,