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

Updating historicalBar chart transitionDuration.

Browse Source
master
Robin Hu 11 years ago
parent acef1926f0
commit 13e7d4c688
3 changed files with 43 additions and 105 deletions
Show Stats Download Patch File Download Diff File

108
examples/historicalBarChart.html
Unescape Escape View File

@ -14,95 +14,51 @@ text {
</style>
<body class='with-3d-shadow with-transitions'>
<div style="width: 100%; height: 400px;">
<svg id="test1"></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/historicalBar.js"></script>
<script src="../src/models/historicalBarChart.js"></script>
<script src="../src/utils.js"></script>
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.historicalBarChart();
chart
.margin({left: 100, bottom: 100})
.x(function(d,i) { return i })
.transitionDuration(250)
;
nv.addGraph({
generate: function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.historicalBarChart()
// .padData(true)
.width(width)
.height(height /2)
.transitionDuration(0)
;
chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
.tickFormat(d3.format(',.1f'));
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format(',.2f'));
chart.showXAxis(true).showYAxis(true);
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(sinData())
.call(chart);
return chart;
},
callback: function(graph) {
/*
graph.dispatch.on('elementClick', function(e) {
console.log("Bar Click",e);
});
graph.dispatch.on('chartClick', function(e) {
console.log("Chart Click",e);
});
graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;
} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});
*/
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height /2 - 40;
graph
.width(width)
.height(height)
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.call(graph);
};
}
});
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'));
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#test1')
.datum(sinData())
.transition().duration(0)
.call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
//Simple test data generators

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

@ -24,7 +24,6 @@ nv.models.historicalBar = function() {
, yRange
, dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
, interactive = true
, transitionDuration = 250
;
//============================================================
@ -169,11 +168,13 @@ 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
.transition()
.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 )
bars.transition().duration(transitionDuration)
bars.transition()
.attr('y', function(d,i) {
var rval = getY(d,i) < 0 ?
y(0) :
@ -320,12 +321,6 @@ nv.models.historicalBar = function() {
return chart;
};
chart.transitionDuration = function(_) {
if (!arguments.length) return transitionDuration;
transitionDuration = _;
return chart;
};
//============================================================

27
src/models/historicalBarChart.js
Unescape Escape View File

@ -31,6 +31,7 @@ nv.models.historicalBarChart = function() {
, defaultState = null
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
, transitionDuration = 250
;
xAxis
@ -85,7 +86,7 @@ nv.models.historicalBarChart = function() {
- margin.top - margin.bottom;
chart.update = function() { container.transition().call(chart) };
chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
chart.container = this;
//set state.disabled
@ -194,7 +195,7 @@ nv.models.historicalBarChart = function() {
var barsWrap = g.select('.nv-barsWrap')
.datum(data.filter(function(d) { return !d.disabled }))
d3.transition(barsWrap).call(bars);
barsWrap.transition().call(bars);
//------------------------------------------------------------
@ -210,7 +211,7 @@ nv.models.historicalBarChart = function() {
g.select('.nv-x.nv-axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
g.select('.nv-x.nv-axis')
.transition()
.transition()
.call(xAxis);
}
@ -221,7 +222,7 @@ nv.models.historicalBarChart = function() {
.tickSize( -availableWidth, 0);
g.select('.nv-y.nv-axis')
.transition().duration(0)
.transition()
.call(yAxis);
}
//------------------------------------------------------------
@ -260,18 +261,6 @@ nv.models.historicalBarChart = function() {
chart.update();
});
/*
legend.dispatch.on('legendMouseover', function(d, i) {
d.hover = true;
selection.transition().call(chart)
});
legend.dispatch.on('legendMouseout', function(d, i) {
d.hover = false;
selection.transition().call(chart)
});
*/
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode);
});
@ -416,10 +405,8 @@ nv.models.historicalBarChart = function() {
};
chart.transitionDuration = function(_) {
if (!arguments.length) return bars.transitionDuration();
bars.transitionDuration(_);
xAxis.transitionDuration(_);
yAxis.transitionDuration(_);
if (!arguments.length) return transitionDuration;
transitionDuration = _;
return chart;
};

Write Preview
Loading…
Cancel
Save