d3.js - 使用 d3.js 缩放或缩放

Question

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

这是一个简化的 jsFiddle

不过，我可以更改比例以查看特定缺陷，比如从 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 的高度。还是有另一种缩放的可能性？

更新按照 Marks 的建议，我实现了它并做了第二个 jsFiddle

我现在面临的问题也是与秤有关。我试图稍微修复它，但一旦使用平移或缩放，缩放函数(xScale 和 yScale)将不会给出正确的值(主要是负值，因为它在视口(viewport)之外)。

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

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

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

因此，无需平移或缩放并直接单击，上述代码即可运行。有人可以告诉我我做错了什么吗？

Answer 1

好的，我明白了。您可以使用缩放功能缩放和平移。一个很好的例子是 zoom to bounding box example ，但该示例基于没有 x 和 y 缩放函数的 d3.geo。

对于 x 和 y 线性缩放对象，您可以这样做:

.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 得到它周围的一点边距。

这是一个 jsFiddle