d3:火灾缩放事件(或模拟缩放事件)

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])

指定y缩放,其缩放时应自动调整其域.如果未指定,则返回当前的y-scale,默认为null.如果以编程方式修改了比例的域,则应将其重新分配给缩放行为.

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

Answer 1

程序化缩放似乎是D3库中的一项艰巨任务,因为D3缩放与鼠标事件密切相关.编程缩放的常见实例是使用滑块控件放大或缩小.令人惊讶的是,我找不到一个如何使用滑块控件进行D3缩放工作的工作示例.在花了一些时间和精力后,我开发了这个工作演示,可以在这里找到D3SliderZoom.关键点是使用滑块抛出的比例值更改嵌入在"<svg>"元素中的"<g>"SVGE元素的transform属性.

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) + ")");

}

然后必须从滑块的change事件调用此方法,如下所示.

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

});

此解决方案比生成伪鼠标滚动事件更优雅.

Answer 2

我最终自己计算了新的缩放级别的新域。有了这个新域，我可以重新绘制两个 y 轴。对于有同样问题的人，我发布我的代码。它对于我的项目来说非常具体，所以可能很难理解。只为你的兴趣。

wr.zoomSim = function(sNew) {

    var s = wr.zoom.scale(),
        tx = wr.zoom.translate()[0],
        ty = wr.zoom.translate()[1],
        sReal = sNew / s,
        dtx = wr.width / 2 * (1 - sReal),
        dty = wr.height / 2 * (1 - sReal),
        txNew = sReal * tx + dtx,
        tyNew = sReal * ty + dty,

        a = wr.scaleYBZoom.domain()[0],
        b = wr.scaleYBZoom.domain()[1],
        c = wr.scaleYBZoom.range()[0],
        d = wr.scaleYBZoom.range()[1],
        r = (b-a)/(d-c);

    wr.scaleYBZoom.domain([a + r * ( (c - dty) / sReal - c), a + r * ( (d - dty) / sReal - c)]);

    wr.zoom.scale(sNew);
    wr.zoom.translate([txNew, tyNew]);

    wr.svg2.select('g#bar')
            .attr('transform', 'translate(' + txNew + ',' + tyNew + ') scale(' + sNew + ')');

    wr.svg2.select('g#axisl')
            .call(d3.svg.axis().scale(wr.scaleYBZoom).orient('left'))
        .selectAll('line.tick')
            .attr('x2', wr.width - wr.bar.left - wr.bar.right + 2 * wr.padding);
    wr.svg2.select('g#axisr')
            .call(d3.svg.axis().scale(wr.scaleYBZoom).orient('right'))
        .selectAll('line')
            .remove();

};