JSFiddle - React, Tailwind, and code Playground

by David McClelland

HTML

<script src="https://raw.github.com/novus/nvd3/master/nv.d3.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/novus/nvd3/master/src/nv.d3.css">
<div id="fx"><svg></svg></div>

JavaScript

nv.addGraph(function() {
var chart = nv.models.lineChart();
var fitScreen = false;
var width = 600;
var height = 300;
var zoom = 1;

chart.useInteractiveGuideline(true);
chart.xAxis
    .axisLabel('Time (days)')
    .rotateLabels(-45)
    .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });

chart.yAxis
    .axisLabel('CAD/USD ($)')
    .tickFormat(d3.format(',.2f'));

d3.select('#fx svg')
    .attr('preserveAspectRatio', 'xMinYMid')
    .attr('width', width)
    .attr('height', height)
    .datum(data());

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('#fx 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('#fx 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('#fx');
    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 =...