Javascript 限制缩放的d3图

我实现了一个d3线图，它从CSV文件中读取数据，然后绘制多条线，这些线对鼠标悬停事件做出反应。它可以使用以下代码进行平移和缩放（很抱歉，它太长，有点不整洁，但我觉得最好显示完整的代码）：

我的问题是，我想限制平移和缩放，这样就不可能在屏幕外缩放或平移图形。我可以通过在缩放上设置scaleExtent（在上面的示例中实现）并将缩放功能更改为：

    function zoomed() {

    var t = zoom.translate(),

    tx = t[0];
    ty = t[1];

    tx = Math.min(tx, 0);
    zoom.translate([tx, ty]);

    d3.event.translate;
    d3.event.scale;

    svg.select(".x.axis")
        .call(xAxis);
    svg.select(".y.axis").call(yAxis);
    svg.select(".x.grid")
        .call(make_x_axis()
        .tickSize(-height, 0, 0)
        .tickFormat(""));
    svg.select(".y.grid")
        .call(make_y_axis()
        .tickSize(-width, 0, 0)
        .tickFormat(""));
    source.select(".line")
        .attr("d", function(d) { return line(d.values); })
        .style("stroke", function(d) {return color(d.name);});
}

这将x轴最小值限制为零。然而，无论我如何努力，我无法限制x轴的最大值，这意味着图形仍然可以向右平移太远

有什么帮助吗？我希望这是有意义的

---

尼克

您只需手动检查该值，如果该值过高，则将其重置：

if(tx > threshold) { tx = threshold; }

此外，声明

d3.event.translate;
d3.event.scale;

---

在您的代码中没有任何效果。

谢谢您的帮助，我最终使用了以下代码：

var t = zoom.translate(),
s = zoom.scale();

tx = Math.min(0, Math.max(width * (1 - s), t[0]));
ty = Math.min(0, Math.max(height * (1 - s), t[1]));

zoom.translate([tx, ty]);

困难在于在不同的缩放级别限制图形，现在解决了这个问题。d3.event.translate和d3.event.scale语句也是不必要的，应该删除它们

var t = zoom.translate(),
s = zoom.scale();

tx = Math.min(0, Math.max(width * (1 - s), t[0]));
ty = Math.min(0, Math.max(height * (1 - s), t[1]));

zoom.translate([tx, ty]);