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

added areaMouseover, areaMouseout, and areaClick to stackedArea chart

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 2741676827
commit 41812f709a
5 changed files with 66 additions and 96 deletions
Show Stats Download Patch File Download Diff File

5
src/d3.css
Unescape Escape View File

@ -264,6 +264,11 @@ svg .title {
stroke-opacity: .75;
stroke-width: 0.1px;
}
.d3stackedarea path.area.hover {
fill-opacity: 1;
stroke-opacity: 1;
}
/*
.d3stackedarea .groups path {
stroke-opacity: 0;

18
src/models/line.js
Unescape Escape View File

@ -108,24 +108,6 @@ nv.models.line = function() {
.y(function(d,i) { return y(getY(d,i)) })
);
/*
var points = groups.selectAll('circle.point')
.data(function(d) { return d.values });
points.enter().append('circle')
.attr('cx', function(d,i) { return x0(getX(d,i)) })
.attr('cy', function(d,i) { return y0(getY(d,i)) });
d3.transition(groups.exit().selectAll('circle.point'))
.attr('cx', function(d,i) { return x(getX(d,i)) })
.attr('cy', function(d,i) { return y(getY(d,i)) })
.remove();
d3.transition(points)
.attr('class', function(d,i) { return 'point point-' + i })
.attr('cx', function(d,i) { return x(getX(d,i)) })
.attr('cy', function(d,i) { return y(getY(d,i)) })
.attr('r', getSize);
*/
scatter
.size(getSize)

73
src/models/scatter.js
Unescape Escape View File

@ -11,8 +11,6 @@ nv.models.scatter = function() {
forceX = [], // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
forceY = [], // List of numbers to Force into the Y scale
forceSize = [], // List of numbers to Force into the Size scale
showDistX = false,
showDistY = false,
interactive = true, // If true, plots a voronoi overlay for advanced point interection
clipEdge = false, // if true, masks lines within x and y scale
clipVoronoi = true, // if true, masks each point with a circle... can turn off to slightly increase performance
@ -71,7 +69,6 @@ nv.models.scatter = function() {
var gEnter = wrapEnter.append('g');
gEnter.append('g').attr('class', 'groups');
//gEnter.append('g').attr('class', 'distribution');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
@ -164,27 +161,11 @@ nv.models.scatter = function() {
dispatch.on('pointMouseover.point', function(d) {
wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
.classed('hover', true);
/*
if (showDistX)
wrap.select('.series-' + d.seriesIndex + ' .distX-' + d.pointIndex)
.attr('y1', d.pos[1] - margin.top);
if (showDistY)
wrap.select('.series-' + d.seriesIndex + ' .distY-' + d.pointIndex)
.attr('x1', d.pos[0] - margin.left);
*/
});
dispatch.on('pointMouseout.point', function(d) {
wrap.select('.series-' + d.seriesIndex + ' circle.point-' + d.pointIndex)
.classed('hover', false);
/*
if (showDistX)
wrap.select('.series-' + d.seriesIndex + ' .distX-' + d.pointIndex)
.attr('y1', y.range()[0]);
if (showDistY)
wrap.select('.series-' + d.seriesIndex + ' .distY-' + d.pointIndex)
.attr('x1', x.range()[0]);
*/
});
}
@ -230,48 +211,6 @@ nv.models.scatter = function() {
.attr('r', function(d,i) { return z(getSize(d,i)) });
/*
if (showDistX) {
var distX = groups.selectAll('line.distX')
.data(function(d) { return d.values })
distX.enter().append('line')
.attr('x1', function(d,i) { return x0(getX(d,i)) })
.attr('x2', function(d,i) { return x0(getX(d,i)) })
//d3.transition(distX.exit())
d3.transition(groups.exit().selectAll('line.distX'))
.attr('x1', function(d,i) { return x(getX(d,i)) })
.attr('x2', function(d,i) { return x(getX(d,i)) })
.remove();
distX
.attr('class', function(d,i) { return 'distX distX-' + i })
.attr('y1', y.range()[0])
.attr('y2', y.range()[0] + 8);
d3.transition(distX)
.attr('x1', function(d,i) { return x(getX(d,i)) })
.attr('x2', function(d,i) { return x(getX(d,i)) })
}
if (showDistY) {
var distY = groups.selectAll('line.distY')
.data(function(d) { return d.values })
distY.enter().append('line')
.attr('y1', function(d,i) { return y0(getY(d,i)) })
.attr('y2', function(d,i) { return y0(getY(d,i)) });
//d3.transition(distY.exit())
d3.transition(groups.exit().selectAll('line.distY'))
.attr('y1', function(d,i) { return y(getY(d,i)) })
.attr('y2', function(d,i) { return y(getY(d,i)) })
.remove();
distY
.attr('class', function(d,i) { return 'distY distY-' + i })
.attr('x1', x.range()[0])
.attr('x2', x.range()[0] - 8)
d3.transition(distY)
.attr('y1', function(d,i) { return y(getY(d,i)) })
.attr('y2', function(d,i) { return y(getY(d,i)) });
}
*/
clearTimeout(timeoutID);
timeoutID = setTimeout(updateInteractiveLayer, 750);
@ -367,18 +306,6 @@ nv.models.scatter = function() {
return chart;
};
chart.showDistX = function(_) {
if (!arguments.length) return showDistX;
showDistX = _;
return chart;
};
chart.showDistY = function(_) {
if (!arguments.length) return showDistY;
showDistY = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;

14
src/models/scatterWithLegend.js
Unescape Escape View File

@ -7,6 +7,8 @@ nv.models.scatterWithLegend = function() {
yAxisRender = true,
xAxisLabelText = false,
yAxisLabelText = false,
showDistX = false,
showDistY = false,
color = d3.scale.category10().range(),
forceX = [],
forceY = [],
@ -237,6 +239,18 @@ nv.models.scatterWithLegend = function() {
return chart;
};
chart.showDistX = function(_) {
if (!arguments.length) return showDistX;
showDistX = _;
return chart;
};
chart.showDistY = function(_) {
if (!arguments.length) return showDistY;
showDistY = _;
return chart;
};
return chart;
}

52
src/models/stackedArea.js
Unescape Escape View File

@ -10,7 +10,7 @@ nv.models.stackedArea = function() {
offset = 'zero',
order = 'default',
xDomain, yDomain,
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'areaClick', 'areaMouseover', 'areaMouseout' );
/************************************
* offset:
@ -24,7 +24,7 @@ nv.models.stackedArea = function() {
* 'default' (input order)
************************************/
var scatter= nv.models.scatter().size(2), //TODO: this really should just be a scatterplot overlayed, not a line
var scatter= nv.models.scatter().size(2),
x = d3.scale.linear(),
y = d3.scale.linear();
@ -60,13 +60,12 @@ nv.models.stackedArea = function() {
scatter
//.interactive(false) //if we were to turn off interactive, the whole line chart should be removed
.width(availableWidth)
.height(availableHeight)
.xDomain(x.domain())
.yDomain(y.domain())
.x(getX)
.y(function(d) { return d.y + d.y0 })
.y(function(d) { return d.y + d.y0 }) // TODO: allow for getY to be other than d.y
.color(data.map(function(d,i) {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }));
@ -101,7 +100,40 @@ nv.models.stackedArea = function() {
var path = g.select('.areaWrap').selectAll('path.area')
.data(function(d) { return d });
path.enter().append('path').attr('class', 'area');
path.enter().append('path').attr('class', function(d,i) { return 'area area-' + i })
.on('mouseover', function(d,i) {
d3.select(this).classed('hover', true);
dispatch.areaMouseover({
point: d,
series: d.key,
//pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
pos: [d3.event.pageX, d3.event.pageY],
seriesIndex: i
//pointIndex: d.point
});
})
.on('mouseout', function(d,i) {
d3.select(this).classed('hover', false);
dispatch.areaMouseout({
point: d,
series: d.key,
//pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
pos: [d3.event.pageX, d3.event.pageY],
seriesIndex: i
//pointIndex: d.point
});
})
.on('click', function(d,i) {
d3.select(this).classed('hover', false);
dispatch.areaClick({
point: d,
series: d.key,
//pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
pos: [d3.event.pageX, d3.event.pageY],
seriesIndex: i
//pointIndex: d.point
});
})
d3.transition(path.exit())
.attr('d', function(d,i) { return zeroArea(d.values,i) })
.remove();
@ -111,8 +143,17 @@ nv.models.stackedArea = function() {
d3.transition(path)
.attr('d', function(d,i) { return area(d.values,i) })
scatter.dispatch.on('pointMouseover.area', function(e) {
g.select('.area-' + e.seriesIndex).classed('hover', true);
});
scatter.dispatch.on('pointMouseout.area', function(e) {
g.select('.area-' + e.seriesIndex).classed('hover', false);
});
});
return chart;
}
@ -189,6 +230,7 @@ nv.models.stackedArea = function() {
chart.dispatch = dispatch;
scatter.dispatch.on('pointMouseover.tooltip', function(e) {
dispatch.tooltipShow({
point: e.point,

Write Preview
Loading…
Cancel
Save