Question

我正在使用this工作代码作为启动器。我正在尝试根据我的数据和需求进行修改。

我唯一不了解的是为什么这种放大缩小无法正常工作。我尝试了this解决方案，但是没有运气。

我无法找到代码中的问题所在，但可以在注释中指出该功能已停用。如何激活它？抱歉，如果这是一个愚蠢的问题，我仍然是JS的新手。也有类似的问题，但问题是jsfiddle不再起作用，因此我看不到整个代码都无法理解逻辑。

// Zoom functionnality is desactivated (user can use browser Ctrl + mouse wheel shortcut)
function zoomAndDrag() {
    //var scale = d3.event.scale,
    var scale = 1,
        translation = d3.event.translate,
        tbound = -height * scale,
        bbound = height * scale,
        lbound = (-width + margin.right) * scale,
        rbound = (width - margin.left) * scale;
    // limit translation to thresholds
    translation = [
        Math.max(Math.min(translation[0], rbound), lbound),
        Math.max(Math.min(translation[1], bbound), tbound)
    ];
    d3.select('.drawarea')
        .attr('transform', 'translate(' + translation + ')' +
              ' scale(' + scale + ')');
}

这是带有代码的有效演示： https://blockbuilder.org/ninjakx/2c4e726a531b40f9f09d7df41217d1de

Answer 1

D3将鼠标滚轮事件用于放大/缩小功能。您的示例在此行中禁用了鼠标滚轮事件：

d3.select('#tree-container').select('svg').on(mouseWheelName, null);

此外，该演示使用的是D3的版本3，我强烈建议您使用该库的最新版本（V5）。

放大缩小d3 js可折叠树

1 个答案: