d3js 缩放导致线低于 x 轴（未缩放）

Question

当我放大图表时，x/y 轴会调整；但该地区没有；它放大图表，打破 x 轴以下的所有内容（如图所示）。我已禁用 panning/clicking。知道为什么会这样吗？

代码如下：

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 轴上缩放来解决这个问题：

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

d3js 缩放导致线低于 x 轴（未缩放）

d3js zooming results in lines going below x axis (not being scaled)

javascript

zooming

d3.js