Y轴过渡导致侧面变化

Question

我有一个奇怪的d3问题，其中我的y轴转换导致轴切换侧。除此之外，我对过渡看起来很满意。 https://i.imgflip.com/g4kdc.gif提供了演示此问题的gif。我已经遵循了一些例子，包括http://bl.ocks.org/mbostock/4323929，但似乎无法弄清楚这个问题。

var dataset = [{
    "year_decided": 1982,
    "Total": 0
}, //some more data 
    {
    "year_decided": "2000",
    "Total": "310"
}]; // default dataset that we can access and override

var margin = {
    top: 30,
    right: 20,
    bottom: 20,
    left: 35
};
var w = $("#section").width() - margin.left - margin.right;
var h = $("#section").height() - margin.top - margin.bottom;


///create the default scales

var xScale = d3.scale.linear()
    .domain([0,dataset.length])
    .range([0,w]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset,function(d){ return +d.Total }) ])
    .range([h,0]);

// create the axes

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickSize(6, 0)
    .orient("bottom")
    .tickFormat(function(d,i){
        return d + 1982;
    });

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("right")
    .tickSize(w);

//define the svg and add it to the document
var svg = d3.select("#section").append("svg")
    .attr("width",w + margin.left + margin.right) 
    .attr("height",h + margin.top + margin.bottom)
    .attr("id", "main-chart");

svg.append("g")
    .attr("transform","translate(" + margin.left + "," + margin.top + ")");


//add an axis group and add the y axis
var gy = svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .call(customAxis)

var gx = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + margin.left +  "," + h + ")")
    .call(xAxis);

//create the line
var line = d3.svg.line()
        .x(function(d, i){ return xScale(i) })
        .y(function(d){ return yScale(+d.Total) })
    .interpolate("linear");

svg.append('path')
        .classed('data-line', true)
    .attr('d', line(dataset))
    .attr("transform", "translate(" + margin.left +  ",0)");

//create the tooltip
var focus = svg.append("g")
    .attr("class", "focus")
    .style("display", "none");

focus.append("circle")
    .attr("r", 4.5)
    .attr("transform", "translate(" + margin.left +  ",0)")
    ;

var tool_tip_year = focus.append("text")
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "translate(" + margin.left +  ",0)")
    ;

var tool_tip_total = focus.append("text")
    .attr("x", 9)
    .attr("dy", "1.8em")
    .attr("transform", "translate(" + margin.left +  ",0)")
    ;

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", w)
    .attr("height", h)
    .attr("transform", "translate(" + margin.left +  ",0)")
    .on("mouseover", function() { focus.style("display", null); })
    .on("mouseout", function() { focus.style("display", "none"); })
    .on("mousemove", mousemove);


var bisectIndex = d3.bisector(function(d, i) { return i; }).left;

function mousemove() {
  var x0 = xScale.invert(d3.mouse(this)[0]),
      i = Math.round(x0),
      d = dataset[i];

  focus.attr("transform", "translate(" + xScale(i) + "," + yScale(+d.Total) + ")");
  tool_tip_year.text(1982 + i);
  tool_tip_total.text(d3.format(",")(+d.Total));
}

function customAxis(g){
    g.selectAll("text")
        .attr("x",4)
        .attr("dy",-4);
}

//update the graph following http://bl.ocks.org/d3noob/7030f35b72de721622b8
$("#submission").submit(function(){
    //define url to request
    var submission = "php/data.php?word=" + $("#submission-text").val();

    //request json and save as dataset
    d3.json(submission, function(error, json) {
        if (error) return console.warn(error);
        dataset = json;

    //rescale the graphs    
        xScale = d3.scale.linear()
        .domain([0,dataset.length])
        .range([0,w]);

        yScale = d3.scale.linear()
        .domain([0, d3.max(dataset,function(d){ return +d.Total }) ])
        .range([h,0]);

        gy.transition()
            .duration(2500)
            .call(yAxis);

        gy.call(customAxis);

        svg.select(".data-line")
            .transition()
            .duration(2000)
            .attr("d",line(dataset));
    })



    });