Added new lineChart example that utilizes SVG resizing without recalling the chart, also updated lineChart's tooltips to work with this
parent
9d3ded6566
commit
f5fa9e5de0
@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div id="chartZoom">
|
||||
<a href="#" id="zoomIn">Zoom In</a> <a href="#" id="zoomOut">Zoom Out</a>
|
||||
</div>
|
||||
|
||||
<div id="chart1">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineChart();
|
||||
var fitScreen = false;
|
||||
var width = 600;
|
||||
var height = 300;
|
||||
var zoom = 1;
|
||||
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',r'));
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('perserveAspectRatio', 'xMinYMid')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos());
|
||||
|
||||
setChartViewBox();
|
||||
resizeChart();
|
||||
|
||||
// These resizes both do the same thing, and require recalculating the chart
|
||||
//nv.utils.windowResize(chart.update);
|
||||
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
|
||||
nv.utils.windowResize(resizeChart);
|
||||
|
||||
d3.select('#zoomIn').on('click', zoomIn);
|
||||
d3.select('#zoomOut').on('click', zoomOut);
|
||||
|
||||
|
||||
function setChartViewBox() {
|
||||
var w = width * zoom,
|
||||
h = height * zoom;
|
||||
|
||||
chart
|
||||
.width(w)
|
||||
.height(h);
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('viewBox', '0 0 ' + w + ' ' + h)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
}
|
||||
|
||||
function zoomOut() {
|
||||
zoom += .25;
|
||||
setChartViewBox();
|
||||
}
|
||||
|
||||
function zoomIn() {
|
||||
if (zoom <= .5) return;
|
||||
zoom -= .25;
|
||||
setChartViewBox();
|
||||
}
|
||||
|
||||
// This resize simply sets the SVG's dimensions, without a need to recall the chart code
|
||||
// Resizing because of the viewbox and perserveAspectRatio settings
|
||||
// This scales the interior of the chart unlike the above
|
||||
function resizeChart() {
|
||||
var container = d3.select('#chart1');
|
||||
var svg = container.select('svg');
|
||||
|
||||
if (fitScreen) {
|
||||
// resize based on container's width AND HEIGHT
|
||||
var windowSize = nv.utils.windowSize();
|
||||
svg.attr("width", windowSize.width);
|
||||
svg.attr("height", windowSize.height);
|
||||
} else {
|
||||
// resize based on container's width
|
||||
var aspect = chart.width() / chart.height();
|
||||
var targetWidth = parseInt(container.style('width'));
|
||||
svg.attr("width", targetWidth);
|
||||
svg.attr("height", Math.round(targetWidth / aspect));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10) });
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue