Question

我正在使用D3js V5进行一个项目，该项目接受CSV文件的输入并返回工作流图，除此之外，一切正常。我的问题是，当我通过“适合”按钮适合工作流程时，然后使用鼠标滚轮进行放大或缩小，只是跳到先前的缩放和位置设置。

经过一些研究，我发现在D3v4 +之后，“缩放行为不再在内部存储活动的缩放变换（即可见区域；缩放和平移）。缩放变换现在存储在缩放行为已应用。（link）“

话虽这么说，但我无法使其发挥作用，这就是为什么我寻求您的帮助。

代码如下：

document.getElementById('fitBTN').addEventListener('click', zoomFit);

function zoomFit() {
    let bounds = document.getElementById('svgContent').getBBox();
    let parent = document.getElementById('svgContent').parentElement;
    let fullWidth = parent.clientWidth,
        fullHeight = parent.clientHeight;
    let width = bounds.width,
        height = bounds.height;
    let midX = bounds.x + width / 2,
        midY = bounds.y + height / 2;
    if (width == 0 || height == 0) return; // nothing to fit
    let scale = 0.95 / Math.max(width / fullWidth, height / fullHeight);
    let translate = [
        fullWidth / 2 - scale * midX,
        fullHeight / 2 - scale * midY
    ];

    document
        .getElementById('svgContent')
        .setAttribute(
            'transform',
            'translate(' +
                translate[0] +
                ',' +
                translate[1] +
                ') scale(' +
                scale +
                ')'
        );
}

svg
    .call(
        zoom()
            .on('zoom', () => {
                document
                    .getElementById('svgContent')
                    .setAttribute(
                        'transform',
                        'translate(' +
                            currentEvent.transform.x * 0.125 +
                            ',' +
                            currentEvent.transform.y * 0.125 +
                            ') scale(' +
                            currentEvent.transform.k +
                            ')'
                    );
            })
            .scaleExtent([0.1, 1])
    )
    .on('dblclick.zoom', false)
    .on('wheel', function() {
        currentEvent.preventDefault();
    })
    .on('wheel', false);

我相信我必须拥有一些能够读取转换转换状态的变量，但是如何？

Answer 1

因此@AndrewReid提供的答案帮助我解决了我的问题，正确的代码版本在这里：

function zoomFit() {
    let bounds = document.getElementById('svgContent').getBBox();
    let parent = document.getElementById('svgContent').parentElement;
    let fullWidth = parent.clientWidth,
        fullHeight = parent.clientHeight;
    let width = bounds.width,
        height = bounds.height;
    let midX = bounds.x + width / 2,
        midY = bounds.y + height / 2;
    if (width == 0 || height == 0) return; // nothing to fit
    let scale = 0.95 / Math.max(width / fullWidth, height / fullHeight);
    let translate = [
        fullWidth / 2 - scale * midX,
        fullHeight / 2 - scale * midY
    ];

    document
        .getElementById('svgContent')
        .setAttribute(
            'transform',
            'translate(' +
                translate[0] +
                ',' +
                translate[1] +
                ') scale(' +
                scale +
                ')'
        );

    // Create a zoom transform from d3.zoomIdentity
    var transform = zoomIdentity
        .scale(scale)
        .translate(-translate[0], -translate[1]);

    // Apply the zoom and trigger a zoom event:
    svg.call(zoom().transform, transform);
}

var zooming = zoom()
    .scaleExtent([0.1, 1])
    .translateExtent([[0, 0], [840, 740]])
    .on('zoom', zoomed);

svg.call(zooming);

function zoomed() {
    svg
        .attr('transform', currentEvent.transform)
        .on('dblclick.zoom', false)
        .on('wheel', function() {
            currentEvent.preventDefault();
        });
}

但是妨碍了平移功能的另一个问题。

我必须弄清楚，一旦找到解决方案，我将更新此答案。

最诚挚的问候，

D3JS v5缩放-转换值在按钮缩放和鼠标滚轮之间变化

1 个答案: