D3 Examples - Pan & Zoom Axes

Pan & Zoom Axes
This example demonstrates using d3-zoom to drive changes to scales’ domains via transform.rescaleX and transform.rescaleY. The transformed scales are used to draw axes. The transform is also applied via SVG transform to the colorful rainbow rect. (The colors are from Nadieh Bremer’s lovely SVG gradient tutorial.)
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.axis path {
  display: none;
}
​
.axis line {
  stroke-opacity: 0.3;
  shape-rendering: crispEdges;
}
​
.view {
  fill: url(#gradient);
  stroke: #000;
}
​
button {
  position: absolute;
  top: 20px;
  left: 20px;
}
​
</style>
<button>Reset</button>
<svg width="960" height="500">
  <defs>
    <d3fc-group id="chart" auto-resize style="display: flex; height: 500px; width: 100%; overflow: hidden">
  <div style="flex: 1; display: flex; flex-direction: column; padding-right: 1em">
    <div style="flex: 1; display: flex; flex-direction: row">
      <div style="width: 1em;">
        <div class='vertical-text'>Price</div>
      </div>
      <d3fc-svg id='y-axis' style='width: 1em;'></d3fc-svg>
      <d3fc-svg id="plot-area" style="flex: 1; overflow: hidden"></d3fc-svg>
    </div>
    <d3fc-svg id="x-axis" style="height: 2em; margin-left: 2em"></d3fc-svg>
  </div>
</d3fc-group>
  </defs>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
​
<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
​
<script src="https://d3js.org/d3.v4.min.js"></script>   
<script src="https://unpkg.com/d3fc@13.0.1"></script>
​
<div id='chart-element' style='height: 500px'></div>
​
<script src='chart.js' type='text/babel'></script>
<script>
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[-100, -100], [width + 90, height + 100]])
    .on("zoom", zoomed);
​
const xScale = fc.scaleDiscontinuous(d3.scaleTime())
  .discontinuityProvider(fc.discontinuitySkipWeekends()).domain([-1, width + 1])
    .range([-1, width + 1]);
​
const yScale = d3.scaleLinear()
.domain([-1, height + 1])
    .range([-1, height + 1]);
var xAxis = d3.axisBottom(x)
    .ticks((width + 2) / (height + 2) * 10)
    .tickSize(height)
    .tickPadding(8 - height);
​
var yAxis = d3.axisRight(y)
    .ticks(10)
    .tickSize(width)
    .tickPadding(8 - width);
const dateAxis = d3.axisBottom()
    .scale(xScale);
const priceAxis = d3.axisLeft()
    .scale(yScale);
const candlestickSeries = fc.seriesSvgCandlestick()
    .bandwidth(2)
    .xScale(xScale)
    .yScale(yScale);
​
​
// use the extent component to determine the x and y domain
const xExtent = fc.extentDate()
    .accessors([d => d.date]);
​
const yExtent = fc.extentLinear()
    .accessors([d => d.high, d => d.low]);
const parseDate = d3.timeParse("%d-%b-%y");
​
d3.select('#plot-area')
  // handle the plot area measure event in order to determine the axis range
  .on('measure', () => {
     xScale.range([0, event.detail.width]);
     yScale.range([event.detail.height, 0]);
  })
  // handle the draw event, rendering the series
    .on('draw', (d, i, nodes) => {
     d3.select(nodes[i])
      .select('svg')
      .call(candlestickSeries);
  });
var view = svg.append("rect")
    .attr("class", "view")
    .attr("x", 0.5)
    .attr("y", 0.5)
    .attr("width", width - 1)
    .attr("height", height - 1);
​
var gX = svg.append("g")
    .attr("class", "axis axis--x")
    .call(xAxis);
​
var gY = svg.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis);
​
d3.select("button")
    .on("click", resetted);
​
svg.call(zoom);
​
function zoomed() {
  view.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
  gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
}
​
function resetted() {
  svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity);
}
​
</script>
​
    