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

added option to make a line and area, and added chart.isArea() to all relevant charts

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 01df69bc68
commit 960eb3f377
8 changed files with 174 additions and 52 deletions
Show Stats Download Patch File Download Diff File

1
examples/lineChart.html
Unescape Escape View File

@ -84,6 +84,7 @@ function sinAndCos() {
return [
{
area: true,
values: sin,
key: "Sine Wave",
color: "#ff7f0e"

100
nv.d3.js
Unescape Escape View File

@ -1554,7 +1554,7 @@ nv.models.cumulativeLineChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
chart.margin = function(_) {
@ -3212,6 +3212,7 @@ nv.models.line = function() {
getX = function(d) { return d.x }, // accessor to get the x value from a data point
getY = function(d) { return d.y }, // accessor to get the y value from a data point
defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null }, // allows a line to be not continous when it is not defined
isArea = function(d) { return d.area }, // decides if a line is an area or just a line
clipEdge = false, // if true, masks lines within x and y scale
x, y, //can be accessed via chart.scatter.[x/y]Scale()
interpolate = "linear"; // controls the line interpolation
@ -3299,32 +3300,77 @@ nv.models.line = function() {
.style('fill-opacity', .5);
var paths = groups.selectAll('path')
.data(function(d, i) { return [d.values] });
paths.enter().append('path')
.attr('class', 'line')
.attr('d', d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y(function(d,i) { return y0(getY(d,i)) })
var areaPaths = groups.selectAll('path.area')
.data(function(d) { return [d] }); // this is done differently than lines because I need to check if series is an area
areaPaths.enter().append('path')
.filter(isArea)
.attr('class', 'area')
.attr('d', function(d) {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y0(function(d,i) { return y0(getY(d,i)) })
.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
});
d3.transition(groups.exit().selectAll('path.area'))
.attr('d', function(d) {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y0(function(d,i) { return y0(getY(d,i)) })
.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
});
d3.transition(areaPaths.filter(isArea))
.attr('d', function(d) {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y0(function(d,i) { return y0(getY(d,i)) })
.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
});
var linePaths = groups.selectAll('path.line')
.data(function(d) { return [d.values] });
linePaths.enter().append('path')
.attr('class', function(d) { return 'line' })
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y(function(d,i) { return y0(getY(d,i)) })
);
d3.transition(groups.exit().selectAll('path'))
.attr('d', d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
d3.transition(groups.exit().selectAll('path.line'))
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
);
d3.transition(paths)
.attr('d', d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
d3.transition(linePaths)
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
);
//store old scales for use in transitions on update
x0 = x.copy();
y0 = y.copy();
@ -3406,6 +3452,12 @@ nv.models.line = function() {
return chart;
};
chart.isArea = function(_) {
if (!arguments.length) return isArea;
isArea = _;
return chart;
};
return chart;
}
@ -3620,7 +3672,7 @@ nv.models.lineChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate');
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate');
chart.margin = function(_) {
@ -4277,7 +4329,7 @@ nv.models.lineWithFocusChart = function() {
chart.x2Axis = x2Axis;
chart.y2Axis = y2Axis;
d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
chart.margin = function(_) {

8
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/models/cumulativeLineChart.js
Unescape Escape View File

@ -276,7 +276,7 @@ nv.models.cumulativeLineChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
chart.margin = function(_) {

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

@ -13,6 +13,7 @@ nv.models.line = function() {
getX = function(d) { return d.x }, // accessor to get the x value from a data point
getY = function(d) { return d.y }, // accessor to get the y value from a data point
defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null }, // allows a line to be not continous when it is not defined
isArea = function(d) { return d.area }, // decides if a line is an area or just a line
clipEdge = false, // if true, masks lines within x and y scale
x, y, //can be accessed via chart.scatter.[x/y]Scale()
interpolate = "linear"; // controls the line interpolation
@ -100,32 +101,77 @@ nv.models.line = function() {
.style('fill-opacity', .5);
var paths = groups.selectAll('path')
.data(function(d, i) { return [d.values] });
paths.enter().append('path')
.attr('class', 'line')
.attr('d', d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y(function(d,i) { return y0(getY(d,i)) })
var areaPaths = groups.selectAll('path.area')
.data(function(d) { return [d] }); // this is done differently than lines because I need to check if series is an area
areaPaths.enter().append('path')
.filter(isArea)
.attr('class', 'area')
.attr('d', function(d) {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y0(function(d,i) { return y0(getY(d,i)) })
.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
});
d3.transition(groups.exit().selectAll('path.area'))
.attr('d', function(d) {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y0(function(d,i) { return y0(getY(d,i)) })
.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
});
d3.transition(areaPaths.filter(isArea))
.attr('d', function(d) {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y0(function(d,i) { return y0(getY(d,i)) })
.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
});
var linePaths = groups.selectAll('path.line')
.data(function(d) { return [d.values] });
linePaths.enter().append('path')
.attr('class', function(d) { return 'line' })
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y(function(d,i) { return y0(getY(d,i)) })
);
d3.transition(groups.exit().selectAll('path'))
.attr('d', d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
d3.transition(groups.exit().selectAll('path.line'))
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
);
d3.transition(paths)
.attr('d', d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
d3.transition(linePaths)
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
);
//store old scales for use in transitions on update
x0 = x.copy();
y0 = y.copy();
@ -207,5 +253,11 @@ nv.models.line = function() {
return chart;
};
chart.isArea = function(_) {
if (!arguments.length) return isArea;
isArea = _;
return chart;
};
return chart;
}

2
src/models/lineChart.js
Unescape Escape View File

@ -210,7 +210,7 @@ nv.models.lineChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate');
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate');
chart.margin = function(_) {

2
src/models/lineWithFocusChart.js
Unescape Escape View File

@ -293,7 +293,7 @@ nv.models.lineWithFocusChart = function() {
chart.x2Axis = x2Axis;
chart.y2Axis = y2Axis;
d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
chart.margin = function(_) {

17
src/nv.d3.css
Unescape Escape View File

@ -290,6 +290,23 @@ svg .title {
*/
}
.nvd3 .groups path.area {
stroke: none;
stroke-linecap: round;
shape-rendering: geometricPrecision;
/*
stroke-width: 2.5px;
transition: stroke-width 250ms linear;
-moz-transition: stroke-width 250ms linear;
-webkit-transition: stroke-width 250ms linear;
transition-delay: 250ms
-moz-transition-delay: 250ms;
-webkit-transition-delay: 250ms;
*/
}
.nvd3 .line.hover path {
stroke-width: 6px;
}

Write Preview
Loading…
Cancel
Save