JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id=plot></div>

CSS

#zoom_pane {
    opacity : 0;
    pointer-events : all;
    cursor : move;
}

JavaScript

var width  = 500;
var height = 150;
var from   = 100;
var to     = 150;
var limits = {
    left    : 0,
    right   : 200,
    zoomOut : 100,
    zoomIn  : 10
};

var svg = d3.select("#plot")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,20)")
    .append("g");

var pane = svg
    .append("rect")
    .attr("id", "zoom_pane")
    .attr("width", width)
    .attr("height", height)

var xScale = d3.scale.linear()
    .domain([from, to])
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("top");

var zoom = function() {
    var currDomain = xScale.domain();
    currDomain[0] = d3.max([currDomain[0], limits.left]);
    currDomain[1] = d3.min([currDomain[1], limits.right]);
    
    svg.call(xAxis);

};

svg.call(xAxis);
pane.call(d3.behavior.zoom()
          .x(xScale)
          .scaleExtent([((to - from)/limits.zoomOut), ((to - from)/limits.zoomIn)])
          .on("zoom", zoom) );