Removed chart config for showDroplines

Added axis layout option for showspikes Added background behind droplines Added axis indicator marker, including on free anchored axes Always draw dropline to chart limit, including for shared axes - not drawing all the way to free anchored axes
plotly · alexcjohnson · Apr 18, 2017 · Mar 10, 2017 · Mar 11, 2017 · Apr 7, 2017
commit 5d39b53367b13c7439 8000 6c4f71cc39185a1c0b30aa
diff --git a/src/components/dragelement/unhover.js b/src/components/dragelement/unhover.js
@@ -42,6 +42,7 @@ unhover.raw = function unhoverRaw(gd, evt) {
 
     fullLayout._hoverlayer.selectAll('g').remove();
     fullLayout._hoverlayer.selectAll('line').remove();
+    fullLayout._hoverlayer.selectAll('circle').remove();
     gd._hoverdata = undefined;
 
     if(evt.target && oldhoverdata) {

diff --git a/src/plot_api/plot_config.js b/src/plot_api/plot_config.js
@@ -48,9 +48,6 @@ 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,
 

diff --git a/src/plots/cartesian/axis_defaults.js b/src/plots/cartesian/axis_defaults.js
@@ -99,6 +99,8 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     coerce('range');
     containerOut.cleanRange();
 
+    coerce('showspikes');
+
     handleTickValueDefaults(containerIn, containerOut, coerce, axType);
     handleTickLabelDefaults(containerIn, containerOut, coerce, axType, options);
     handleTickMarkDefaults(containerIn, containerOut, coerce, options);

diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js
@@ -592,7 +592,7 @@ function hover(gd, evt, subplot) {
 
     gd._hoverdata = newhoverdata;
 
-    if(gd._context.showDroplines && hoverChanged(gd, evt, oldhoverdata)) {
+    if(hoverChanged(gd, evt, oldhoverdata)) {
         var droplineOpts = {
             hovermode: hovermode,
             container: fullLayout._hoverlayer,
@@ -829,38 +829,102 @@ fx.loneUnhover = function(containerOrSelection) {
 
     selection.selectAll('g.hovertext').remove();
     selection.selectAll('line.dropline').remove();
+    selection.selectAll('circle.dropline').remove();
 };
 
 function createDroplines(hoverData, opts) {
     var hovermode = opts.hovermode,
-        container = opts.container;
-
+        container = opts.container,
+        outerContainer = opts.outerContainer;
     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;
+    var c0 = hoverData[0],
+        x = (c0.x0 + c0.x1) / 2,
+        y = (c0.y0 + c0.y1) / 2,
+        xOffset = c0.xa._offset,
+        yOffset = c0.ya._offset,
+        xPoint = xOffset + x,
+        yPoint = yOffset + y,
+        xSide = c0.xa.side,
+        ySide = c0.ya.side,
+        xLength = c0.xa._length,
+        yLength = c0.ya._length,
+        xEdge = c0.ya._boundingBox.left + (ySide === 'left' ? c0.ya._boundingBox.width : 0),
+        yEdge = c0.xa._boundingBox.top + (xSide === 'top' ? c0.xa._boundingBox.height : 0),
+        outerBBox = outerContainer.node().getBoundingClientRect(),
+        xFreeBase = xOffset + (ySide === 'right' ? xLength : 0),
+        yFreeBase = yOffset + (xSide === 'top' ? yLength : 0),
+        xAnchoredBase = xEdge - outerBBox.left,
+        yAnchoredBase = yEdge - outerBBox.top,
+        xBase = c0.ya.anchor === 'free' ? xFreeBase : xAnchoredBase,
+        yBase = c0.xa.anchor === 'free' ? yFreeBase : yAnchoredBase,
+        color = c0.color;
+
+    // Remove old dropline items
     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');
+    container.selectAll('circle.dropline').remove();
+
+
+    if(c0.ya.showspikes) {
+        // Background horizontal Line (to y-axis)
+        container.append('line')
+            .attr('x1', xBase)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yPoint)
+            .attr('stroke-width', 5)
+            .attr('stroke', '#fff')
+            .attr('class', 'dropline');
+
+        // Foreground horizontal line (to y-axis)
+        container.append('line')
+            .attr('x1', xBase)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yPoint)
+            .attr('stroke-width', 3)
+            .attr('stroke', color)
+            .attr('stroke-dasharray', '5,5')
+            .attr('class', 'dropline');
+
+        // Y axis marker
+        container.append('circle')
+            .attr('cx', xBase)
+            .attr('cy', yPoint)
+            .attr('r', 3)
+            .attr('fill', color)
+            .attr('class', 'dropline');
+    }
+
+    if(c0.xa.showspikes) {
+        // Background vertical line (to x-axis)
+        container.append('line')
+            .attr('x1', xPoint)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yBase)
+            .attr('stroke-width', 5)
+            .attr('stroke', '#fff')
+            .attr('class', 'dropline');
+
+        // Foreground vertical line (to x-axis)
+        container.append('line')
+            .attr('x1', xPoint)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yBase)
+            .attr('stroke-width', 3)
+            .attr('stroke', color)
+            .attr('stroke-dasharray', '5,5')
+            .attr('class', 'dropline');
+
+        // X axis marker
+        container.append('circle')
+            .attr('cx', xPoint)
+            .attr('cy', yBase)
+            .attr('r', 3)
+            .attr('fill', color)
+            .attr('class', 'dropline');
+    }
 }
 
 function createHoverText(hoverData, opts) {

diff --git a/src/plots/cartesian/layout_attributes.js b/src/plots/cartesian/layout_attributes.js
@@ -244,6 +244,15 @@ module.exports = {
         role: 'style',
         description: 'Determines whether or not the tick labels are drawn.'
     },
+    showspikes: {
+        valType: 'boolean',
+        dflt: false,
+        role: 'style',
+        description: [
+            'Determines whether or not spikes (aka droplines) are drawn for this axis.',
+            'Note: This only takes affect when hovermode = closest'
+        ].join(' ')
+    },
     tickfont: extendFlat({}, fontAttrs, {
         description: 'Sets the tick font.'
     }),