D3orgChart 滚动时缩放

Question

这是添加按钮以放大和缩小图表的示例。

在图表上滚动时我需要停止缩放。 我怎样才能做到这一点？

https://stackblitz.com/edit/js-zd21e3?file=index.html

我试过了，但没用

d3.select('.chart-container').on('wheel.zoom', null);

我的代码在这里

!function ($) {
    var chart;
    
    if (!$.plugin) { $.plugin = {}; }
    if (!$.plugin.D3OrgChartPlugin) { $.plugin.D3OrgChartPlugin = {}; }

    $.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(d3.zoom().wheelDelta(null))
                .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() {});
        
    },
        

    $.plugin.D3OrgChartPlugin.OnClickZoomIn = function(){
        chart.zoomIn();
    },
    $.plugin.D3OrgChartPlugin.OnClickZoomOut = function(){
        chart.zoomOut()
    }
      
    // ------------------------------------------
    //  DOM READY CODE
    // ------------------------------------------
    $(document).ready(function() {
        //$.plugin.D3OrgChartPlugin.Options.init();
    });
}(window.jQuery)

Answer 1

查看 d3-org-chart 的 源代码，缩放行为是在

SVG

元素上设置的，因此正确的调用是：

d3.select(".svg-chart-container").on("wheel.zoom", null);