D3.js zooming with axis

Question

I have a project where I need to zoom on 3 axes independently. I'm using scroll bars to accomplish this, but the axes aren't redrawing when the zoom happens.

Additionally, the clip path doesn't seem to be working as expected.

Eventually I want to add panning functionality to the chart as well, but I'm not sure where to start for this.

http://jsfiddle.net/yo4mwLpj/

Thanks in advance for the help.

// cases vs deaths of a disease over time
var data = [
{"year": "1960", "cases":"887",   "deaths": "199"},
{"year": "1965", "cases":"218",   "deaths": "55"},
{"year": "1993", "cases":"37046", "deaths": "931"},
{"year": "1994", "cases":"38735", "deaths": "118"},
{"year": "1995", "cases":"19903", "deaths": "624"},
{"year": "1997", "cases":"4170",  "deaths": "125"},
{"year": "1998", "cases":"10000", "deaths": "0"}
];
data.forEach(function (d) {
   d.year   = d3.time.format("%Y").parse(d.year.toString());
   d.cases  = +d.cases;
   d.deaths = +d.deaths;
});

var margin = { top: 30, right: 40, bottom: 30, left: 50 },
   width = 500 - margin.left - margin.right,
   height = 270 - margin.top - margin.bottom;

var xScale = d3.time.scale()
   .domain(d3.extent(data, function (d) { return d.year; }))
   .range([0, width]);

var yScaleLeft = d3.scale.linear()
   .domain([0, d3.max(data, function (d) { return d.cases; })])
   .range([height, 0]);

var yScaleRight = d3.scale.linear()
   .domain([0, d3.max(data, function (d) { return d.deaths; })])
   .range([height, 0]);

var xAxis = d3.svg.axis()
   .scale(xScale)
   .orient("bottom").ticks(5);

var yAxisLeft = d3.svg.axis()
   .scale(yScaleLeft)
   .orient("left").ticks(5);

var yAxisRight = d3.svg.axis()
   .scale(yScaleRight)
   .orient("right").ticks(5);

var lineCases = d3.svg.line()
   .x(function (d) { return xScale(d.year); })
   .y(function (d) { return yScaleLeft(d.cases); });

var lineDeaths = d3.svg.line()
   .x(function (d) { return xScale(d.year); })
   .y(function (d) { return yScaleRight(d.deaths); });

var svg = d3.select("#chart").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);

svg.append("g")
   .attr("class", "y axis yleft")
   .call(yAxisLeft);

svg.append("g")
   .attr("class", "y axis yright")
   .call(yAxisRight)
   .attr('transform', 'translate(' + width + ',0)');

svg.append("path")
   .datum(data)
   .attr("class", "line lineLeft")
   .style("stroke", "red")
   .attr("d", lineCases(data))
   .attr("clip", "url(#clip)");

svg.append("path")
   .datum(data)
   .attr("class", "line lineRight")
   .attr("d", lineDeaths(data))
   .attr("clip", "url(#clip)");

svg.append("clipPath")
   .attr("id", "clip")
   .append("rect")
   .attr("width", width)
   .attr("height", height);

$("#slider-x").slider({
   orientation: "horizontal",
   range: "min",
   min: 1000,
   max: 10000, // make max be (maxDate-minDate).Days*1000, so you can zoom to one day
   value: 1000,
   slide: function( event, ui ) {
      zoomXWithSlider(ui.value/1000);
   }
});

$( "#slider-y-left" ).slider({
   orientation: "vertical",
   range: "min",
   min: 1000,
   max: 10000,
   value: 1000,
   slide: function( event, ui ) {
      zoomLeftWithSlider(ui.value/1000);
   }
});

$("#slider-y-right").slider({
   orientation: "vertical",
   range: "min",
   min: 1000,
   max: 10000,
   value: 1000,
   slide: function( event, ui ) {
      zoomRightWithSlider(ui.value/1000);
   }
});

function zoomXWithSlider(scale) {
   // Note: works only on the <g> element and not on the <svg> element
     // which is a common mistake
   svg.selectAll("path.line").attr("transform", "scale("+scale+", 1)");
   svg.select(".x.axis").call(xAxis);
}

function zoomLeftWithSlider(scale) {
   svg.select("path.line.lineLeft").attr("transform", "scale(1, "+scale+")");
   svg.select(".y.axis.yleft").call(yAxisLeft);
}

function zoomRightWithSlider(scale) {
   svg.select("path.line.lineRight").attr("transform", "scale(1, "+scale+")");
   svg.select(".y.axis.yright").call(yAxisRight);
}

Answer 1

http://jsfiddle.net/8oo3ocfs/

    var zoom = d3.behavior.zoom() //zoomYAxis
   .x(xScale)
   .y(yScaleLeft)
   .on("zoom", function(){
      // don't let double-click or scroll wheel do anything
      if (d3.event.sourceEvent == null || d3.event.sourceEvent.type == "wheel"){
         zoom.scale(previousScale);
         zoom.translate(previousTranslate);
         zoomRight.scale(previousScale);
         zoomRight.translate(previousTranslate);
         return;
      }

      // set previous scale for future use
      previousScale = zoom.scale();
      previousTranslate = zoom.translate();

      //zoom.translate(panLimit());
      //zoomRight.translate(zoom.translate());

      // update the right side scale
      zoomRight.scale(previousScale);
      zoomRight.translate(previousTranslate);

      // redraw lines
      svg.select("path.line.lineLeft").attr("d", lineCases(data));
      svg.select("path.line.lineRight").attr("d", lineDeaths(data));

      // redraw axes
      svg.select(".x.axis").call(xAxis);
      svg.select(".y.axis.yleft").call(yAxisLeft);
      svg.select(".y.axis.yright").call(yAxisRight);
   });

I eventually got this working. I don't need the clip-path to work in the jsfiddle because it works in our actual project. Additionally, I didn't end up limiting the pan functionality because it got very complex with the math. So I just put a reset button on it.