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

【问题标题】：d3js zooming results in lines going below x axis (not being scaled)d3js 缩放导致线条低于 x 轴（未缩放）
【发布时间】：2015-07-29 14:06:32
【问题描述】：

当我放大图表时，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));
    });

【问题讨论】：

标签： javascript d3.js zooming

【解决方案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));
    });

【讨论】：