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

Added padData option to allow bars and lines to align correctly without cutting off half of the first and last bar

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 1e4ddf43d7
commit 38ba70f4dc
8 changed files with 101 additions and 22 deletions
Show Stats Download Patch File Download Diff File

1
examples/historicalBar.html
Unescape Escape View File

@ -30,6 +30,7 @@ nv.addGraph({
height = nv.utils.windowSize().height - 40;
var chart = nv.models.historicalBar()
.padData(true)
.width(width)
.height(height);

57
nv.d3.js
Unescape Escape View File

@ -53,7 +53,7 @@ nv.render = function render(step) {
nv.dispatch.render_start();
setTimeout(function() {
var chart;
var chart, graph;
for (var i = 0; i < step && (graph = render.queue[i]); i++) {
chart = graph.generate();
@ -766,6 +766,7 @@ nv.models.historicalBar = function() {
, getY = function(d) { return d.y }
, forceX = []
, forceY = [0]
, padData = false
, clipEdge = true
, color = nv.utils.defaultColor()
, xDomain
@ -787,9 +788,13 @@ nv.models.historicalBar = function() {
// Setup Scales
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ))
.range([0, availableWidth]);
y .domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
if (padData)
x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
else
x.range([0, availableWidth]);
y .domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
.range([availableHeight, 0]);
// If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
@ -907,7 +912,7 @@ nv.models.historicalBar = function() {
bars
.attr('fill', function(d,i) { return color(d, i); })
.attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - ((availableWidth / data[0].values.length) * .45)) + ',0)'; }) //TODO: better width calculations that don't assume always uniform data spacing;w
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; }) //TODO: better width calculations that don't assume always uniform data spacing;w
.attr('width', (availableWidth / data[0].values.length) * .9 )
@ -1004,6 +1009,12 @@ nv.models.historicalBar = function() {
return chart;
};
chart.padData = function(_) {
if (!arguments.length) return padData;
padData = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;
@ -3769,7 +3780,7 @@ nv.models.line = function() {
chart.dispatch = scatter.dispatch;
chart.scatter = scatter;
d3.rebind(chart, scatter, 'id', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
d3.rebind(chart, scatter, 'id', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'padData');
chart.margin = function(_) {
if (!arguments.length) return margin;
@ -4211,12 +4222,17 @@ nv.models.linePlusBarChart = function() {
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;
bars
.padData(true)
;
lines
.clipEdge(false)
.padData(true)
;
xAxis
.orient('bottom')
.tickPadding(7)
.highlightZero(false)
;
y1Axis
.orient('left')
@ -4410,7 +4426,8 @@ nv.models.linePlusBarChart = function() {
g.select('.nv-y2.nv-axis')
.style('opacity', dataLines.length ? 1 : 0)
.attr('transform', 'translate(' + x.range()[1] + ',0)');
.attr('transform', 'translate(' + availableWidth + ',0)');
//.attr('transform', 'translate(' + x.range()[1] + ',0)');
d3.transition(g.select('.nv-y2.nv-axis'))
.call(y2Axis);
@ -7117,6 +7134,7 @@ nv.models.ohlcBar = function() {
, getLow = function(d) { return d.low }
, forceX = []
, forceY = []
, padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
, clipEdge = true
, color = nv.utils.defaultColor()
, xDomain
@ -7145,8 +7163,12 @@ nv.models.ohlcBar = function() {
//------------------------------------------------------------
// Setup Scales
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ))
.range([0, availableWidth]);
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
if (padData)
x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
else
x.range([0, availableWidth]);
y .domain(yDomain || [
d3.min(data[0].values.map(getLow).concat(forceY)),
@ -7427,6 +7449,12 @@ nv.models.ohlcBar = function() {
return chart;
};
chart.padData = function(_) {
if (!arguments.length) return padData;
padData = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;
@ -8049,6 +8077,7 @@ nv.models.scatter = function() {
, forceSize = [] // List of numbers to Force into the Size scale
, interactive = true // If true, plots a voronoi overlay for advanced point interection
, pointActive = function(d) { return !d.notActive } // any points that return false will be filtered out
, padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
, clipEdge = false // if true, masks points within x and y scale
, clipVoronoi = true // if true, masks each point with a circle... can turn off to slightly increase performance
, clipRadius = function() { return 25 } // function to get the radius for voronoi point clips
@ -8105,7 +8134,11 @@ nv.models.scatter = function() {
);
x .domain(xDomain || d3.extent(seriesData.map(function(d) { return d.x }).concat(forceX)))
.range([0, availableWidth]);
if (padData)
x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
else
x.range([0, availableWidth]);
y .domain(yDomain || d3.extent(seriesData.map(function(d) { return d.y }).concat(forceY)))
.range([availableHeight, 0]);
@ -8568,6 +8601,12 @@ nv.models.scatter = function() {
return chart;
};
chart.padData = function(_) {
if (!arguments.length) return padData;
padData = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;

10
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

17
src/models/historicalBar.js
Unescape Escape View File

@ -15,6 +15,7 @@ nv.models.historicalBar = function() {
, getY = function(d) { return d.y }
, forceX = []
, forceY = [0]
, padData = false
, clipEdge = true
, color = nv.utils.defaultColor()
, xDomain
@ -36,9 +37,13 @@ nv.models.historicalBar = function() {
// Setup Scales
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ))
.range([0, availableWidth]);
y .domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
if (padData)
x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
else
x.range([0, availableWidth]);
y .domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
.range([availableHeight, 0]);
// If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
@ -156,7 +161,7 @@ nv.models.historicalBar = function() {
bars
.attr('fill', function(d,i) { return color(d, i); })
.attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - ((availableWidth / data[0].values.length) * .45)) + ',0)'; }) //TODO: better width calculations that don't assume always uniform data spacing;w
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; }) //TODO: better width calculations that don't assume always uniform data spacing;w
.attr('width', (availableWidth / data[0].values.length) * .9 )
@ -253,6 +258,12 @@ nv.models.historicalBar = function() {
return chart;
};
chart.padData = function(_) {
if (!arguments.length) return padData;
padData = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;

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

@ -209,7 +209,7 @@ nv.models.line = function() {
chart.dispatch = scatter.dispatch;
chart.scatter = scatter;
d3.rebind(chart, scatter, 'id', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
d3.rebind(chart, scatter, 'id', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'padData');
chart.margin = function(_) {
if (!arguments.length) return margin;

8
src/models/linePlusBarChart.js
Unescape Escape View File

@ -32,12 +32,17 @@ nv.models.linePlusBarChart = function() {
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;
bars
.padData(true)
;
lines
.clipEdge(false)
.padData(true)
;
xAxis
.orient('bottom')
.tickPadding(7)
.highlightZero(false)
;
y1Axis
.orient('left')
@ -231,7 +236,8 @@ nv.models.linePlusBarChart = function() {
g.select('.nv-y2.nv-axis')
.style('opacity', dataLines.length ? 1 : 0)
.attr('transform', 'translate(' + x.range()[1] + ',0)');
.attr('transform', 'translate(' + availableWidth + ',0)');
//.attr('transform', 'translate(' + x.range()[1] + ',0)');
d3.transition(g.select('.nv-y2.nv-axis'))
.call(y2Axis);

15
src/models/ohlcBar.js
Unescape Escape View File

@ -19,6 +19,7 @@ nv.models.ohlcBar = function() {
, getLow = function(d) { return d.low }
, forceX = []
, forceY = []
, padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
, clipEdge = true
, color = nv.utils.defaultColor()
, xDomain
@ -47,8 +48,12 @@ nv.models.ohlcBar = function() {
//------------------------------------------------------------
// Setup Scales
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ))
.range([0, availableWidth]);
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
if (padData)
x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
else
x.range([0, availableWidth]);
y .domain(yDomain || [
d3.min(data[0].values.map(getLow).concat(forceY)),
@ -329,6 +334,12 @@ nv.models.ohlcBar = function() {
return chart;
};
chart.padData = function(_) {
if (!arguments.length) return padData;
padData = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;

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

@ -23,6 +23,7 @@ nv.models.scatter = function() {
, forceSize = [] // List of numbers to Force into the Size scale
, interactive = true // If true, plots a voronoi overlay for advanced point interection
, pointActive = function(d) { return !d.notActive } // any points that return false will be filtered out
, padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
, clipEdge = false // if true, masks points within x and y scale
, clipVoronoi = true // if true, masks each point with a circle... can turn off to slightly increase performance
, clipRadius = function() { return 25 } // function to get the radius for voronoi point clips
@ -79,7 +80,11 @@ nv.models.scatter = function() {
);
x .domain(xDomain || d3.extent(seriesData.map(function(d) { return d.x }).concat(forceX)))
.range([0, availableWidth]);
if (padData)
x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
else
x.range([0, availableWidth]);
y .domain(yDomain || d3.extent(seriesData.map(function(d) { return d.y }).concat(forceY)))
.range([availableHeight, 0]);
@ -542,6 +547,12 @@ nv.models.scatter = function() {
return chart;
};
chart.padData = function(_) {
if (!arguments.length) return padData;
padData = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;

Write Preview
Loading…
Cancel
Save