javascript - 触发缩放事件(或模拟缩放事件)

Question

当我用鼠标缩放时，将执行附加到 myZoom 的以下函数:

myZoom.on('zoom', function() {

    someElement.attr('transform', 'translate(' + d3.event.translate[0] + ',' + d3.event.translate[1] + ') scale(' + d3.event.scale + ')');

....
// redraw axes, which should stay where they are at.
....

}

要在没有鼠标或其他指针设备的情况下模拟缩放，我可以只更改上面属性“transform”的值。很简单。

但问题是在这个函数中我实际上重绘了轴，它的比例是自动重新计算的。引用 d3 的官方文档:

zoom.y([y])

Specifies an y-scale whose domain should be automatically adjusted when zooming. If not specified, returns the current y-scale, which defaults to null. If the scale's domain is modified programmatically, it should be reassigned to the zoom behaviour.

我需要以编程方式缩放(可能使用缩放按钮)。如何触发缩放事件，以便自动重新计算轴的比例？

Answer 1

编程缩放在 D3 库中似乎是一项艰巨的任务，因为 D3 缩放与鼠标事件密切相关。编程缩放的一个常见实例是使用 slider 控件进行放大或缩小。令人惊讶的是，我找不到一个单一的工作示例来说明如何使用 slider 控件进行 D3 缩放。在投入一些时间和精力后，我开发了这个可以在此处找到的工作演示 D3SliderZoom .关键点是使用 slider 抛出的比例值更改嵌入在“

function zoomWithSlider(scale) {
    var svg = d3.select("body").select("svg");
    var container = svg.select("g");
    var h = svg.attr("height"), w = svg.attr("width");

    // Note: works only on the <g> element and not on the <svg> element
    // which is a common mistake
    container.attr("transform",
            "translate(" + w/2 + ", " + h/2 + ") " +
            "scale(" + scale + ") " +
            "translate(" + (-w/2) + ", " + (-h/2) + ")");

然后必须从 slider 的更改事件调用此方法，如下所示。

$(function() {
$( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 1000,
    max: 10000,
    value: 1000,
    slide: function( event, ui ) {
        zoomWithSlider(ui.value/1000);
    }
});

});

这个解决方案比生成伪鼠标滚动事件要优雅得多。