diff --git a/src/models/sparklinePlus.js b/src/models/sparklinePlus.js index 4a2bb0b..3b653c0 100644 --- a/src/models/sparklinePlus.js +++ b/src/models/sparklinePlus.js @@ -13,6 +13,7 @@ nv.models.sparklinePlus = function() { , x , y , color = nv.utils.defaultColor() + , index , xTickFormat = d3.format(',r') , yTickFormat = d3.format(',.2f') , noData = "No Data Available." @@ -69,6 +70,7 @@ nv.models.sparklinePlus = function() { var g = wrap.select('g'); gEnter.append('g').attr('class', 'nv-sparklineWrap') + gEnter.append('g').attr('class', 'nv-hoverArea'); wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') @@ -91,43 +93,50 @@ nv.models.sparklinePlus = function() { //------------------------------------------------------------ - var hoverValue = gEnter.append('g').attr('class', 'nv-hoverValue'); - var hoverArea = gEnter.append('g').attr('class', 'nv-hoverArea'); + var hoverArea = gEnter.select('.nv-hoverArea'); + hoverArea.append('rect') + .attr('width', availableWidth) + .attr('height', availableHeight) + .on('mousemove', sparklineHover); + + index = data.length - 1; + + var hoverValue = g.selectAll('.nv-hoverValue').data([index]); - hoverValue.attr('transform', function(d) { return 'translate(' + x(d) + ',0)' }); + var hoverG = hoverValue.enter().append('g').attr('class', 'nv-hoverValue'); - var hoverLine = hoverValue.append('line') - .attr('x1', x.range()[1]) + hoverValue.attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' }); + + var hoverLine = hoverG.append('line') + .attr('x1', 0) .attr('y1', -margin.top) - .attr('x2', x.range()[1]) + .attr('x2', 0) .attr('y2', availableHeight); - var hoverX = hoverValue.append('text').attr('class', 'nv-xValue') + var hoverX = hoverG.append('text').attr('class', 'nv-xValue') .attr('text-anchor', 'end') .attr('dy', '.9em'); - var hoverY = hoverValue.append('text').attr('class', 'nv-yValue') + var hoverY = hoverG.append('text').attr('class', 'nv-yValue') //.attr('transform', function(d) { return 'translate(' + x(d) + ',0)' }) .attr('text-anchor', 'start') .attr('dy', '.9em'); - hoverArea.append('rect') - .attr('width', availableWidth) - .attr('height', availableHeight) - .on('mousemove', sparklineHover); - function sparklineHover() { var pos = d3.event.offsetX - margin.left; - hoverLine + /* + hoverValue.select('line') .attr('x1', pos) .attr('x2', pos); + */ - hoverX + //hoverX + hoverValue.select('.nv-xValue') .attr('transform', function(d) { return 'translate(' + (pos - 6) + ',' + (-margin.top) + ')' }) .text(xTickFormat(Math.round(x.invert(pos)))); @@ -143,7 +152,8 @@ nv.models.sparklinePlus = function() { return closestIndex; } - hoverY + //hoverY + hoverValue.select('.nv-yValue') .attr('transform', function(d) { return 'translate(' + (pos + 6) + ',' + (-margin.top) + ')' }) .text(yTickFormat(sparkline.y()(data[f(data, Math.round(x.invert(pos)))]))); }