如何禁用D3 OrgChart图表的滚轮缩放功能？

你尝试的d3.select('.chart-container').on('wheel.zoom', null)无效，原因是d3-orgchart的缩放行为通常绑定在内部SVG元素上，而非你选中的.chart-container容器。以下是两种可行的解决方法：

方法一：初始化时配置缩放行为过滤滚轮事件 #

在创建d3.OrgChart实例时，直接修改zoomBehavior，通过filter方法忽略滚轮事件：

chart = new d3.OrgChart()
    // ... 其他配置项
    .zoomBehavior(d3.zoom().filter(function(event) {
        // 只允许非滚轮触发的缩放事件
        return event.type !== 'wheel';
    }))
    // ... 剩余配置
    .render();

方法二：渲染后移除内部元素的滚轮缩放事件 #

如果方法一不生效，可以在图表渲染完成后，找到实际绑定缩放的内部SVG元素，移除其滚轮事件：

// 在chart.render()之后添加
d3.select('.chart-container svg').on('wheel.zoom', null);

修改后的完整代码片段 #

将初始化代码中的.zoomBehavior(d3.zoom().wheelDelta(null))替换为方法一中的配置：

$.plugin.D3OrgChartPlugin.init = function(csvFilePath) {
    d3.csv(csvFilePath).then((dataFlattened) => {
        chart = new d3.OrgChart()
            .container('.chart-container')
            .data(dataFlattened)
            .rootMargin(100)
            .nodeWidth((d) => 210)
            .nodeHeight((d) => 170)
            .childrenMargin((d) => 130)
            .compactMarginBetween((d) => 75)
            .compactMarginPair((d) => 80)
            // 替换原zoomBehavior配置
            .zoomBehavior(d3.zoom().filter(function(event) {
                return event.type !== 'wheel';
            }))
            .linkUpdate(function (d, i, arr) {
                d3.select(this)
                    .attr('stroke', (d) =>
                        d.data._upToTheRootHighlighted ? '#152785' : 'lightgray'
                    )
                    .attr('stroke-width', (d) =>
                        d.data._upToTheRootHighlighted ? 5 : 1.5
                    )
                    .attr('stroke-dasharray', '4,4');
    
                if (d.data._upToTheRootHighlighted) {
                    d3.select(this).raise();
                }
            })
            .nodeContent(function (d, i, arr, state) {
                const color = d.data.color;
                const imageDim = 80;
                const lightCircleDim = 95;
                const outsideCircleDim = 110;
                // convert the syntax in the return bloc: ES6 to ES5 to work with jcms
                return '\\
                    <div style="background-color:white; position:absolute;width:' +
                        d.width +
                        'px;height:' + d.height + 'px;">\\
                        <div class="yep" style="background-color:' + color + ';position:absolute;margin-top:-' + (outsideCircleDim / 2) + 'px;margin-left:' + (d.width / 2 - outsideCircleDim / 2) + 'px;border-radius:100px;width:' + outsideCircleDim + 'px;height:' + outsideCircleDim + 'px;"></div>\\
                        <div style="background-color:#ffffff;position:absolute;margin-top:-' + (lightCircleDim / 2) + 'px;margin-left:' + (d.width / 2 - lightCircleDim / 2) + 'px;border-radius:100px;width:' + lightCircleDim + 'px;height:' + lightCircleDim + 'px;"></div>\\
                        <div src="" style="background:url(\\'data:image/png;base64,' + d.data.photo + '\\');position:absolute;margin-top:-' + (imageDim / 2) + 'px;margin-left:' + (d.width / 2 - imageDim / 2) + 'px;border-radius:100px;width:' + imageDim + 'px;height:' + imageDim + 'px; background-position:center;background-size: cover;"></div>\\
                        <div class="card" style="top:' + (outsideCircleDim / 2 + 10) + 'px;position:absolute;height:30px;width:' + d.width + 'px;background-color:#3AB6E3;">\\
                            <div style="background-color:' + color + ';height:50px;text-align:center;padding-top:10px;color:#ffffff;">\\
                                <span style="font-weight:bold;font-size:16px">' + d.data.displayName + '</span> <br />\\
                                <span style="font-size:10px">' + d.data.fonction + '</span>\\
                            </div>\\
                            <div style="background-color:#F0EDEF;height:30px;text-align:center;padding-top:10px;color:#424142;font-size:10px">\\
                                ' + d.data.affectation + ' \\
                            </div>\\
                        </div>\\
                    </div>\\
                ';
            })
            .render();
    });
    const chartElement = $(\".chart\");
    chartElement.off('scroll', updateTransform);
    chartElement.on('scroll', function() {});
};

这样就能彻底禁用滚轮触发的缩放，同时保留你自定义的放大/缩小按钮功能。

内容的提问来源于stack exchange，提问作者RoadNKite