Question

我正在使用d3.js版本5，并向我的主要svg添加了缩放比例：

const zoom = window.d3.zoom().on('zoom', onZoom);
const svg = window.d3.select('#neo4j-graph')
        .append('svg')
        .attr('width', '100%')
        .attr('height', '100%')
        .attr('viewBox', `0 0 ${width} ${height}`)
        .attr('preserveAspectRatio', 'xMidYMid meet')
        .call(zoom)
        .append('g');

function onZoom() {
    svg.attr('transform', window.d3.event.transform);
    currentScale = window.d3.event.transform.k;
}

还添加了一个很酷的功能，当单击其中一个节点时，它将视图居中并放大：

function centerToNode(d) {
        const scale = 1.5;

        // normalize for width/height
        let newX = width / 2 - scale * d.x;
        let newY = height / 2 - scale * d.y;
        let transform = window.d3.zoomIdentity.scale(scale).translate(newX, newY);
        svg.transition().duration(1000).call(zoom.transform, transform);

    }

两者都很好，但是有一个小错误我无法修复，当我单击节点时，视图放大并居中，然后使用滚轮从节点缩小时，视图“跳”到点击前我以前的位置。换句话说，看起来像手动缩放会更新视图，但不会更新d3中的内部缩放值。

我做错了吗？我需要一种将手动变焦与d3变焦同步的方法吗？任何帮助都很好

Answer 1

确定，代码如下：

const svg = window.d3.select('#neo4j-graph')
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('viewBox', `0 0 ${width} ${height}`)
    .attr('preserveAspectRatio', 'xMidYMid meet')
    .call(zoom)
    .append('g');

实际上，

将'g'元素插入到'svg'变量中，而不是SVG元素中。导致稍后代码中的某些不匹配。

因此新的固定代码为：

const zoom = window.d3.zoom().on('zoom', onZoom);
const svg = window.d3.select('#neo4j-graph')
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('viewBox', `0 0 ${width} ${height}`)
    .attr('preserveAspectRatio', 'xMidYMid meet');

const g = svg.call(zoom).append('g');

function onZoom() {
    g.attr('transform', window.d3.event.transform);
}

d3v5手动变焦和滚轮变焦不同步

1 个答案: