d3js缩放导致行在x轴下方（未缩放）

Question

当我放大图表时，x / y轴调整;但该地区没有;它放大图表，打破x轴下方的所有内容（如图中所示）。我已禁用平移/点击。有没有想过为什么会这样？

代码如下：

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height,0]);

x.domain(d3.extent(data, function(d) { return parseDate(d.x); }));
y.domain([0, d3.max(data, function(d) {
    if (d.y >= 1) {
        return d.y
    }

    return 1;
})]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(12);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(7);

var varea = d3.svg.area()
    .defined(function(d) { return d.y != null; })
    .x(function(d) { return x(parseDate(d.x)); })
    .y0(height)
    .y1(function(d) { return y(d.y); });

var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1,10])
    .on("zoom", function() {
        svg.select(".x.axis").call(xAxis);
        svg.select(".y.axis").call(yAxis);
        svg.select("path.area").attr("d", varea(data));
    });

Answer 1

我通过不在y轴上缩放并且仅在x轴上缩放来修复此问题：

＆＃xA;＆＃xA;

  var zoom = d3.behavior.zoom（）＆ #xA; .X（X）＆＃XA; .scaleExtent（[1,10]）＆＃XA; .on（“zoom”，function（）{＆＃xA; svg.select（“。x.axis”）。call（xAxis）;＆＃xA; svg.select（“path.area”）。attr（“ d“，varea（数据））;＆＃xA;}）;＆＃xA;  

＆＃xA;