const data = [];


var x = d3.scaleLinear();
var y = d3.scaleLinear();

var x2 = d3.scaleLinear();
var y2 = d3.scaleLinear();

var area = fc.seriesSvgPoint()
  .crossValue(function(d) { return d.x; })
  .mainValue(function(d) { return d.y; })
  .size(800);

var zoom = d3.zoom()
  .on('zoom', function() {

    x.domain(d3.event.transform.rescaleX(x2).domain());
    y.domain(d3.event.transform.rescaleY(y2).domain());
    render();
  });


var chart = fc.chartSvg(x, y)
  .chartLabel('')
  .plotArea(area)
  .decorate((sel) => {

    sel.enter()
      .select('#plot-area')
      .on('measure.range', () => {
        x2.range([0, d3.event.detail.width]);
        y2.range([d3.event.detail.height, 0]);
      })
      .call(zoom);
  });

function render() {
  d3.select('#zoom-chart')
    .datum(data)
    .call(chart);
}

render();

    })();