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

100
examples/historicalBarChart.html
Unescape Escape View File

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

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

@ -24,7 +24,6 @@ nv.models.historicalBar = function() {
, yRange , yRange
, dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout') , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
, interactive = true , interactive = true
, transitionDuration = 250
; ;
//============================================================ //============================================================
@ -169,11 +168,13 @@ nv.models.historicalBar = function() {
bars bars
.attr('fill', function(d,i) { return color(d, i); }) .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('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 ) .attr('width', (availableWidth / data[0].values.length) * .9 )
bars.transition().duration(transitionDuration) bars.transition()
.attr('y', function(d,i) { .attr('y', function(d,i) {
var rval = getY(d,i) < 0 ? var rval = getY(d,i) < 0 ?
y(0) : y(0) :
@ -320,12 +321,6 @@ nv.models.historicalBar = function() {
return chart; 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 , defaultState = null
, noData = 'No Data Available.' , noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState') , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
, transitionDuration = 250
; ;
xAxis xAxis
@ -85,7 +86,7 @@ nv.models.historicalBarChart = function() {
- margin.top - margin.bottom; - margin.top - margin.bottom;
chart.update = function() { container.transition().call(chart) }; chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
chart.container = this; chart.container = this;
//set state.disabled //set state.disabled
@ -194,7 +195,7 @@ nv.models.historicalBarChart = function() {
var barsWrap = g.select('.nv-barsWrap') var barsWrap = g.select('.nv-barsWrap')
.datum(data.filter(function(d) { return !d.disabled })) .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') g.select('.nv-x.nv-axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')'); .attr('transform', 'translate(0,' + y.range()[0] + ')');
g.select('.nv-x.nv-axis') g.select('.nv-x.nv-axis')
.transition() .transition()
.call(xAxis); .call(xAxis);
} }
@ -221,7 +222,7 @@ nv.models.historicalBarChart = function() {
.tickSize( -availableWidth, 0); .tickSize( -availableWidth, 0);
g.select('.nv-y.nv-axis') g.select('.nv-y.nv-axis')
.transition().duration(0) .transition()
.call(yAxis); .call(yAxis);
} }
//------------------------------------------------------------ //------------------------------------------------------------
@ -260,18 +261,6 @@ nv.models.historicalBarChart = function() {
chart.update(); 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) { dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode); if (tooltips) showTooltip(e, that.parentNode);
}); });
@ -416,10 +405,8 @@ nv.models.historicalBarChart = function() {
}; };
chart.transitionDuration = function(_) { chart.transitionDuration = function(_) {
if (!arguments.length) return bars.transitionDuration(); if (!arguments.length) return transitionDuration;
bars.transitionDuration(_); transitionDuration = _;
xAxis.transitionDuration(_);
yAxis.transitionDuration(_);
return chart; return chart;
}; };

Write Preview
Loading…
Cancel
Save