使用d3.js缩放或缩放

我已经用d3创建了一个图表来显示表面上的缺陷。表面本身约1000毫米宽，但可能有几公里长。为了更清楚地看到缺陷，我已经实现了d3缩放，但是，有时候缺陷会分布在x范围内，所以放大到这么远会导致从左向右滚动

这是一个简单的例子

但是，我可以改变比例来查看特定缺陷，比如从1000mm开始，到1500mm结束，我可以：

var yScale = d3.scale.linear() 
     .domain([1000 - margin, 1500 + margin])
     .range([0, pixelHeight]);   

但由于我的缺陷是矩形，我需要用yScale计算宽度，如下所示：

.attr("height", function (d) {
        return yScale(d.height);
    })

如果我更改了标尺的域（高度可能小于域值，给出负值），这将不起作用

那么我该如何解决这个问题呢？是否有方法计算缺陷相对于yScale的高度。或者还有另一种变焦的可能性吗

更新 根据马克的建议，我实施了它，并做了第二次尝试

我现在面临的问题也是天平的问题。我尝试过修复它，但一旦使用平移或缩放，缩放函数（xScale和yScale）就不会给出正确的值（大部分为负值，因为它不在视口中）

---

因此，无需平移或缩放并直接单击，上述代码就可以正常工作。有人能告诉我我做错了什么吗？

好的，我知道了。可以使用缩放功能进行缩放和平移。一个很好的示例是，但该示例基于没有x和y缩放函数的d3.geo

使用x和y线性AIR缩放对象，可以执行以下操作：

.on('click', function (d) {
    d3.selectAll('rect').classed('selected-rect', false);
    d3.select(this).classed('selected-rect', true);

    zoom.translate([0, 0]).scale(1).event;   

    var dx = xScale(d.width),
        dy = yScale(d.height),
        x = xScale(d.x) + xScale(d.width/2),
        y = yScale(d.y) + yScale(d.height/2),
        scale = .85 / Math.max(dx / pixelWidth, dy / pixelHeight),
      translate = [pixelWidth / 2 - scale * x, 
                   pixelHeight / 2 - scale * y];

    svg.transition()
        .duration(750)
        .call(zoom.translate(translate).scale(scale).event);                           
});

首先：在进行任何xScale和yScale计算之前，必须重置平移和缩放。我只是这样说的：

zoom.translate([0, 0]).scale(1).event; 

dx和dy是对象的缩放宽度/高度。要到达对象的中间，需要获取缩放的x和y值，并将宽度和高度的一半添加到该值上。否则它当然不会正确地居中（我现在说当然是因为我一直在摆弄它）

通过获取对象的最大宽度或高度来计算比例，并将其偏差为0.85，以获得其周围的一点边距

---

这里有一个

听起来像是你想要实现一个…@标记我已经更新了我的问题

zoom.translate([0, 0]).scale(1).event;