diff --git a/src/interactiveLayer.js b/src/interactiveLayer.js index cd93895..3b8836c 100644 --- a/src/interactiveLayer.js +++ b/src/interactiveLayer.js @@ -230,4 +230,22 @@ nv.interactiveBisect = function (values, searchVal, xAccessor) { return index; else return nextIndex +}; + +/* +Returns the index in the array "values" that is closest to searchVal. +Only returns an index if searchVal is within some "threshold". +Otherwise, returns null. +*/ +nv.nearestValueIndex = function (values, searchVal, threshold) { + "use strict"; + var yDistMax = Infinity, indexToHighlight = null; + values.forEach(function(d,i) { + var delta = Math.abs(searchVal - d); + if ( delta < yDistMax && delta < threshold) { + yDistMax = delta; + indexToHighlight = i; + } + }); + return indexToHighlight; }; \ No newline at end of file diff --git a/src/models/cumulativeLineChart.js b/src/models/cumulativeLineChart.js index dd83514..035d169 100644 --- a/src/models/cumulativeLineChart.js +++ b/src/models/cumulativeLineChart.js @@ -515,15 +515,11 @@ nv.models.cumulativeLineChart = function() { //Highlight the tooltip entry based on which point the mouse is closest to. if (allData.length > 2) { var yValue = chart.yScale().invert(e.mouseY); - var yDistMax = Infinity, indexToHighlight = null; - allData.forEach(function(series,i) { - var delta = Math.abs(yValue - series.value); - if ( delta < yDistMax) { - yDistMax = delta; - indexToHighlight = i; - } - }); - allData[indexToHighlight].highlight = true; + var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]); + var threshold = 0.03 * domainExtent; + var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold); + if (indexToHighlight !== null) + allData[indexToHighlight].highlight = true; } var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex), pointIndex); diff --git a/src/models/lineChart.js b/src/models/lineChart.js index 8fb1ab3..a4ffcf6 100644 --- a/src/models/lineChart.js +++ b/src/models/lineChart.js @@ -265,15 +265,11 @@ nv.models.lineChart = function() { //Highlight the tooltip entry based on which point the mouse is closest to. if (allData.length > 2) { var yValue = chart.yScale().invert(e.mouseY); - var yDistMax = Infinity, indexToHighlight = null; - allData.forEach(function(series,i) { - var delta = Math.abs(yValue - series.value); - if ( delta < yDistMax) { - yDistMax = delta; - indexToHighlight = i; - } - }); - allData[indexToHighlight].highlight = true; + var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]); + var threshold = 0.03 * domainExtent; + var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold); + if (indexToHighlight !== null) + allData[indexToHighlight].highlight = true; } var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex)); diff --git a/src/nv.d3.css b/src/nv.d3.css index 075a953..cae8348 100644 --- a/src/nv.d3.css +++ b/src/nv.d3.css @@ -98,6 +98,7 @@ border-spacing:0; } + .nvtooltip table td { padding: 2px 9px 2px 0; vertical-align: middle; @@ -111,6 +112,14 @@ font-weight: bold; } +.nvtooltip table tr.highlight td { + padding: 1px 9px 1px 0; + border-bottom-style: solid; + border-bottom-width: 1px; + border-top-style: solid; + border-top-width: 1px; +} + .nvtooltip table td.legend-color-guide div { width: 8px; height: 8px; diff --git a/src/tooltip.js b/src/tooltip.js index 94b01db..3e135cb 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -106,8 +106,8 @@ window.nv.tooltip.* also has various helper methods. trowEnter.selectAll("td").each(function(p) { if (p.highlight) d3.select(this) - .style("border-bottom","solid 1px " + p.color) - .style("border-top","solid 1px " + p.color) + .style("border-bottom-color", p.color) + .style("border-top-color", p.color) ; });