blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Issue #307: hover value and line are not created UNTIL actual hover, instead of created and hidden

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 53687e1454
commit 7b6f3ca87f
4 changed files with 94 additions and 91 deletions
Show Stats Download Patch File Download Diff File

11
examples/sparklinePlus.html
Unescape Escape View File

@ -3,13 +3,15 @@
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
text {
font: 10px sans-serif;
}
#chart1 {
width: 500px;
height: 50px;
font-size: 14px;
margin-top: -6px;
}
h2, p {
float: left;
}
</style>
@ -30,6 +32,7 @@ nv.addGraph(function() {
var chart = nv.models.sparklinePlus()
chart
.margin({left:70})
.x(function(d,i) { return i })
.xTickFormat(function(d) {
return d3.time.format('%x')(new Date(data[d].x))

82
nv.d3.js
Unescape Escape View File

@ -9646,7 +9646,7 @@ nv.models.sparklinePlus = function() {
, height = null
, x
, y
, index
, index = []
, paused = false
, xTickFormat = d3.format(',r')
, yTickFormat = d3.format(',.2f')
@ -9758,66 +9758,66 @@ nv.models.sparklinePlus = function() {
gEnter.select('.nv-hoverArea').append('rect')
.on('mousemove', sparklineHover)
.on('click', function() { paused = !paused })
.on('mouseout', function() { index = null; updateValueLine(); });
.on('mouseout', function() { index = []; updateValueLine(); });
//.on('mouseout', function() { index = null; updateValueLine(); });
g.select('.nv-hoverArea rect')
.attr('transform', function(d) { return 'translate(' + -margin.left + ',' + -margin.top + ')' })
.attr('width', availableWidth + margin.left + margin.right)
.attr('height', availableHeight + margin.top);
// if index is not set, default to last point
//index = typeof index == 'undefined' ? data.length - 1 : index;
// if index is not set, default to null
index = typeof index == 'undefined' ? null : index;
var hoverValue = g.selectAll('.nv-hoverValue').data([index])
var hoverG = hoverValue.enter().append('g').attr('class', 'nv-hoverValue')
function updateValueLine() { //index is currently global (within the chart), may or may not keep it that way
if (paused) return;
var hoverValue = g.selectAll('.nv-hoverValue').data(index)
var hoverEnter = hoverValue.enter()
.append('g').attr('class', 'nv-hoverValue')
.style('stroke-opacity', 0)
.style('fill-opacity', 0);
var hoverLine = hoverG.append('line')
.attr('x1', 0)
.attr('y1', -margin.top)
.attr('x2', 0)
.attr('y2', availableHeight);
var hoverX = hoverG.append('text').attr('class', 'nv-xValue')
.attr('x', -6)
.attr('y', -margin.top)
.attr('text-anchor', 'end')
.attr('dy', '.9em');
hoverValue.exit()
.transition().duration(250)
.style('stroke-opacity', 0)
.style('fill-opacity', 0)
.remove();
var hoverY = hoverG.append('text').attr('class', 'nv-yValue')
.attr('x', 6)
.attr('y', -margin.top)
.attr('text-anchor', 'start')
.attr('dy', '.9em');
hoverValue
.attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
.transition().duration(250)
.style('stroke-opacity', 1)
.style('fill-opacity', 1);
updateValueLine();
if (!index.length) return;
hoverEnter.append('line')
.attr('x1', 0)
.attr('y1', -margin.top)
.attr('x2', 0)
.attr('y2', availableHeight);
function updateValueLine() { //index is currently global (within the chart), may or may not keep it that way
if (paused) return;
hoverValue.data([index])
hoverEnter.append('text').attr('class', 'nv-xValue')
.attr('x', -6)
.attr('y', -margin.top)
.attr('text-anchor', 'end')
.attr('dy', '.9em')
//d3.transition(hoverValue)
hoverValue
.transition().duration(250)
.style('stroke-opacity', function(d) { return d === null ? 0 : 1 })
.style('fill-opacity', function(d) { return d === null ? 0 : 1 });
if (index == null) return;
g.select('.nv-hoverValue .nv-xValue')
.text(xTickFormat(sparkline.x()(data[index[0]], index[0])));
hoverValue
.attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
hoverEnter.append('text').attr('class', 'nv-yValue')
.attr('x', 6)
.attr('y', -margin.top)
.attr('text-anchor', 'start')
.attr('dy', '.9em')
hoverValue.select('.nv-xValue')
.text(xTickFormat(sparkline.x()(data[index], index)));
g.select('.nv-hoverValue .nv-yValue')
.text(yTickFormat(sparkline.y()(data[index[0]], index[0])));
hoverValue.select('.nv-yValue')
.text(yTickFormat(sparkline.y()(data[index], index)));
}
@ -9838,7 +9838,7 @@ nv.models.sparklinePlus = function() {
return closestIndex;
}
index = getClosestIndex(data, Math.round(x.invert(pos)));
index = [getClosestIndex(data, Math.round(x.invert(pos)))];
updateValueLine();
}

10
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

82
src/models/sparklinePlus.js
Unescape Escape View File

@ -12,7 +12,7 @@ nv.models.sparklinePlus = function() {
, height = null
, x
, y
, index
, index = []
, paused = false
, xTickFormat = d3.format(',r')
, yTickFormat = d3.format(',.2f')
@ -124,66 +124,66 @@ nv.models.sparklinePlus = function() {
gEnter.select('.nv-hoverArea').append('rect')
.on('mousemove', sparklineHover)
.on('click', function() { paused = !paused })
.on('mouseout', function() { index = null; updateValueLine(); });
.on('mouseout', function() { index = []; updateValueLine(); });
//.on('mouseout', function() { index = null; updateValueLine(); });
g.select('.nv-hoverArea rect')
.attr('transform', function(d) { return 'translate(' + -margin.left + ',' + -margin.top + ')' })
.attr('width', availableWidth + margin.left + margin.right)
.attr('height', availableHeight + margin.top);
// if index is not set, default to last point
//index = typeof index == 'undefined' ? data.length - 1 : index;
// if index is not set, default to null
index = typeof index == 'undefined' ? null : index;
var hoverValue = g.selectAll('.nv-hoverValue').data([index])
var hoverG = hoverValue.enter().append('g').attr('class', 'nv-hoverValue')
function updateValueLine() { //index is currently global (within the chart), may or may not keep it that way
if (paused) return;
var hoverValue = g.selectAll('.nv-hoverValue').data(index)
var hoverEnter = hoverValue.enter()
.append('g').attr('class', 'nv-hoverValue')
.style('stroke-opacity', 0)
.style('fill-opacity', 0);
var hoverLine = hoverG.append('line')
.attr('x1', 0)
.attr('y1', -margin.top)
.attr('x2', 0)
.attr('y2', availableHeight);
var hoverX = hoverG.append('text').attr('class', 'nv-xValue')
.attr('x', -6)
.attr('y', -margin.top)
.attr('text-anchor', 'end')
.attr('dy', '.9em');
hoverValue.exit()
.transition().duration(250)
.style('stroke-opacity', 0)
.style('fill-opacity', 0)
.remove();
var hoverY = hoverG.append('text').attr('class', 'nv-yValue')
.attr('x', 6)
.attr('y', -margin.top)
.attr('text-anchor', 'start')
.attr('dy', '.9em');
hoverValue
.attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
.transition().duration(250)
.style('stroke-opacity', 1)
.style('fill-opacity', 1);
updateValueLine();
if (!index.length) return;
hoverEnter.append('line')
.attr('x1', 0)
.attr('y1', -margin.top)
.attr('x2', 0)
.attr('y2', availableHeight);
function updateValueLine() { //index is currently global (within the chart), may or may not keep it that way
if (paused) return;
hoverValue.data([index])
hoverEnter.append('text').attr('class', 'nv-xValue')
.attr('x', -6)
.attr('y', -margin.top)
.attr('text-anchor', 'end')
.attr('dy', '.9em')
//d3.transition(hoverValue)
hoverValue
.transition().duration(250)
.style('stroke-opacity', function(d) { return d === null ? 0 : 1 })
.style('fill-opacity', function(d) { return d === null ? 0 : 1 });
if (index == null) return;
g.select('.nv-hoverValue .nv-xValue')
.text(xTickFormat(sparkline.x()(data[index[0]], index[0])));
hoverValue
.attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
hoverEnter.append('text').attr('class', 'nv-yValue')
.attr('x', 6)
.attr('y', -margin.top)
.attr('text-anchor', 'start')
.attr('dy', '.9em')
hoverValue.select('.nv-xValue')
.text(xTickFormat(sparkline.x()(data[index], index)));
g.select('.nv-hoverValue .nv-yValue')
.text(yTickFormat(sparkline.y()(data[index[0]], index[0])));
hoverValue.select('.nv-yValue')
.text(yTickFormat(sparkline.y()(data[index], index)));
}
@ -204,7 +204,7 @@ nv.models.sparklinePlus = function() {
return closestIndex;
}
index = getClosestIndex(data, Math.round(x.invert(pos)));
index = [getClosestIndex(data, Math.round(x.invert(pos)))];
updateValueLine();
}

Write Preview
Loading…
Cancel
Save