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

refactor how scale is used now that I kind of understand it

Browse Source
master-patched
Steven Noble 12 years ago
parent c00625b2ba
commit 9d5b67e791
2 changed files with 56 additions and 71 deletions
Show Stats Download Patch File Download Diff File

39
examples/multiChart.html
Unescape Escape View File

@ -45,38 +45,27 @@ text {
<script>
var testdata = stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
var testdata = stream_layers(7,10+Math.random()*100,.1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data
values: data.map(function(a){a.y = a.y - i/2; return a})
};
});
testdata[0].type = "area"
testdata[0].type = "line"
testdata[0].yAxis = 1
testdata[1].type = "line"
testdata[1].yAxis = 2
testdata[1].yAxis = 1
testdata[2].type = "line"
testdata[2].yAxis = 2
/*
//For testing single data point
var testdata = [
{
"key" : "Quantity" ,
"bar": true,
"values" : [ [ 1136005200000 , 1271000.0] ]
} ,
{
"key" : "Price" ,
"values" : [ [ 1136005200000 , 71.89] ]
}
].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
*/
testdata[3].type = "bar"
testdata[3].yAxis = 2
testdata[4].type = "bar"
testdata[4].yAxis = 2
testdata[5].type = "bar"
testdata[5].yAxis = 2
testdata[6].type = "bar"
testdata[6].yAxis = 2
nv.addGraph(function() {
@ -87,10 +76,10 @@ nv.addGraph(function() {
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yLinesAxis1
chart.yAxis1
.tickFormat(d3.format(',.1f'));
chart.yLinesAxis2
chart.yAxis2
.tickFormat(d3.format(',.1f'));

88
src/models/multiChart.js
Unescape Escape View File

@ -21,25 +21,22 @@ nv.models.multiChart = function() {
//------------------------------------------------------------
var x = d3.scale.linear(),
lines1 = nv.models.line(),
yLines1 = lines1.yScale(),
lines2 = nv.models.line(),
yLines2 = lines2.yScale(),
bars1 = nv.models.multiBar().stacked(false),
yBars1 = bars1.yScale(),
bars2 = nv.models.multiBar().stacked(false),
yBars2 = bars2.yScale(),
stack1 = nv.models.stackedArea(),
yStack1 = stack1.yScale(),
stack2 = nv.models.stackedArea(),
yStack2 = stack2.yScale(),
yScale1 = d3.scale.linear(),
yScale2 = d3.scale.linear(),
lines1 = nv.models.line().yScale(yScale1),
lines2 = nv.models.line().yScale(yScale2),
bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),
stack1 = nv.models.stackedArea().yScale(yScale1),
stack2 = nv.models.stackedArea().yScale(yScale2),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yLinesAxis1 = nv.models.axis().scale(yLines1).orient('left'),
yBarsAxis1 = nv.models.axis().scale(yBars1).orient('left'),
yStackAxis1 = nv.models.axis().scale(yStack1).orient('left'),
yLinesAxis2 = nv.models.axis().scale(yLines2).orient('right'),
yBarsAxis2 = nv.models.axis().scale(yBars2).orient('right'),
yStackAxis2 = nv.models.axis().scale(yStack2).orient('right'),
yAxis1 = nv.models.axis().scale(yScale1).orient('left'),
yAxis2 = nv.models.axis().scale(yScale2).orient('right'),
legend = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
@ -120,21 +117,21 @@ nv.models.multiChart = function() {
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color[i % color.length];
}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2}));
}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'bar'}));
stack1
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color[i % color.length];
}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1}));
}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'area'}));
stack2
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color[i % color.length];
}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2}));
}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'area'}));
g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
@ -153,30 +150,31 @@ nv.models.multiChart = function() {
var stack2Wrap = g.select('.stack2Wrap')
.datum(dataStack2)
var extraValue1 = []
var extraValue2 = []
var extraValue1 = dataStack1.length ? [{x:0, y:0}] : []
var extraValue2 = dataStack2.length ? [{x:0, y:0}] : []
yScale1 .domain(d3.extent(d3.merge(series1).concat(extraValue1), function(d) { return d.y } ))
.range([0, availableHeight])
yScale2 .domain(d3.extent(d3.merge(series2).concat(extraValue2), function(d) { return d.y } ))
.range([0, availableHeight])
lines1.yDomain(yScale1.domain())
bars1.yDomain(yScale1.domain())
stack1.yDomain(yScale1.domain())
lines2.yDomain(yScale2.domain())
bars2.yDomain(yScale2.domain())
stack2.yDomain(yScale2.domain())
if(dataLines1.length){d3.transition(lines1Wrap).call(lines1);}
if(dataBars1.length){d3.transition(bars1Wrap).call(bars1);}
if(dataStack1.length){
d3.transition(stack1Wrap).call(stack1);
extraValue1.push({x:0, y:0})
}
if(dataStack1.length){d3.transition(stack1Wrap).call(stack1);}
if(dataLines2.length){d3.transition(lines2Wrap).call(lines2);}
if(dataBars2.length){d3.transition(bars2Wrap).call(bars2);}
if(dataStack2.length){
d3.transition(stack2Wrap).call(stack2);
extraValue2.push({x:0, y:0})
}
yLinesAxis1.domain(d3.extent(d3.merge(series1), function(d) { return d.y } ))
yBarsAxis1.domain(d3.extent(d3.merge(series1), function(d) { return d.y } ))
yStackAxis1.domain(d3.extent(d3.merge(series1).concat(extraValue1), function(d) { return d.y } ))
if(dataStack2.length){d3.transition(stack2Wrap).call(stack2);}
yLinesAxis2.domain(d3.extent(d3.merge(series2), function(d) { return d.y } ))
yBarsAxis2.domain(d3.extent(d3.merge(series2), function(d) { return d.y } ))
yStackAxis2.domain(d3.extent(d3.merge(series2).concat(extraValue2), function(d) { return d.y } ))
xAxis
.ticks( availableWidth / 100 )
@ -187,22 +185,20 @@ nv.models.multiChart = function() {
d3.transition(g.select('.x.axis'))
.call(xAxis);
yLinesAxis1
yAxis1
.ticks( availableHeight / 36 )
.tickSize( -availableWidth, 0);
// d3.transition(g.select('.y1.axis'))
// .call(yLinesAxis1);
d3.transition(g.select('.y1.axis'))
.call(yStackAxis1);
.call(yAxis1);
yLinesAxis2
yAxis2
.ticks( availableHeight / 36 )
.tickSize( -availableWidth, 0);
d3.transition(g.select('.y2.axis'))
.call(yLinesAxis2);
.call(yAxis2);
g.select('.y2.axis')
.style('opacity', series2.length ? 1 : 0)
@ -229,8 +225,8 @@ nv.models.multiChart = function() {
chart.stack1 = stack1;
chart.stack2 = stack2;
chart.xAxis = xAxis;
chart.yLinesAxis1 = yStackAxis1;
chart.yLinesAxis2 = yLinesAxis2;
chart.yAxis1 = yAxis1;
chart.yAxis2 = yAxis2;
d3.rebind(chart, lines1, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate');

Write Preview
Loading…
Cancel
Save