i dont know whats is you aim for, i thing the answer above me it settle your thing, maybe you just didnt stop the event use d3.event.defaultPrevented() if you want stop the event

    function panRight(){
          d3.event.defaultPrevented()//use it so it will reset the event

          var new_xScale = d3.event.transform.rescaleX(x2)
          usageAreaPath.attr("transform", d3.event.transform);
          usageLinePath.attr("transform", d3.event.transform);
          circles.attr("transform", d3.event.transform);
//the result is normal ordinary chart

but if you playing with unremarking the d3.event.defaultPrevented() on redraw() the result is one weird chart

function redraw(){
  var domain, 

  t = d3.event.transform;
  // console.log(t.rescaleX(x2).domain());
  // console.log(xScale.domain());

  xAxis = d3.axisBottom(xScale).tickSize(0).tickFormat(d3.timeFormat('%b'));".axis--x").call(xAxis);

  usageAreaPath.attr("d", area);


      .attr('cx', function(d) { return xScale(getDate(d)); })
      .attr('cy', function(d) { return yScale(d.kWh); })
      .attr("transform", "translate(0," + 80 + ")");



If you are updating the graph differently when panning and zooming in order to decrease the amount of times we regenerate the graph just add the check in the zoomed function as below,

function zoomed(){
    if(d3.event.transform.x !== 0 &&  d3.event.transform.y !== 0){

Here is the link to the updated working jsbin.

I hope it will solve your graph regeneration problem.


There are two separate problems with your code:

1. Translate

You used .attr("transform", "translate( 0, 80)") the wrong way. Remove all the .attr("transform", "translate(0," + 80 + ")") from your <path>, <circle>, axes and area and set the offset like this:

// Usage x-axis
var gX = focus.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + (height + + ")")

// Focus Viewpoint
var focus = svg.append("g")
    .attr("class", "focus")
    .attr('transform', "translate(" 
        + margin.left + "," + ( + 80) 
        + ")"

Doing this way, the whole chart is shifted downwards together in the <g>.

2. panRight()

You are moving the circles and the lines twice: First with the new scale, second with the .attr("transform", d3.event.transform). So just remove following three lines

usageAreaPath.attr("transform", d3.event.transform);
usageLinePath.attr("transform", d3.event.transform);
circles.attr("transform", d3.event.transform);

Here the working jsbin


I just realized, that the zoomed function is not working at all. The redraw function is called all the time during panning (also in my solution). Therefore the panning is executed twice. If the "if statement" in the zoomed function would work, the panRight() function would be necessary. So focus on this if/else statement. One option could be to distinguish between mouse wheel and drag event, e.g. if(d3.event.sourceEvent.toString() === "[object MouseEvent]"). So the redraw function will not be called during panning, but some scaling issues remain. Maybe this could help.

Related Query

More Query from same tag