將SVG平移縮放添加到使用D3js動態創建的SVG

Question

對於平移和縮放，我使用此庫。

因此，當我右鍵單擊時，我將使用D3js庫創建一個新的SVG元素，例如：

$("body").on("contextmenu", function(e) {
        var parent = d3.select("#panzoom");
        var id = "svg"+($("#panzoom svg").length+1);

        var svg = parent.append("svg").attr("width", 200+"px").attr("height", 200+"px").attr("x", e.pageX+"px").attr("y", e.pageY+"px").attr("id", id);
        var rectSelection = svg.append("rect")
        .attr("x", e.pageX)
        .attr("y", e.pageY)
        .attr("width", 200)
        .attr("height", 200)
        .attr("fill", "yellow");

       // here I put the below code ! (instead of #svg1, I put id variable declared above)
});

要將平移縮放添加到svg，您可以執行以下操作：

svgPanZoom("#svg1", {
         panEnabled: true,
         controlIconsEnabled: false,
         zoomEnabled: true,
         dblClickZoomEnabled: true,
         mouseWheelZoomEnabled: true,
         zoomScaleSensitivity: 0.2,
         minZoom: 0.2,
         maxZoom: 20,
         fit: true,
         contain: true,
         center: true,
         refreshRate: 'auto'
});

對於新創建的SVG，無法分配svgPanZoom （引發DOM中不存在的錯誤）

如何做到這一點？

Answer 1

我沒有發現任何問題

沒有什么特別的方法可以在單擊按鈕時動態創建圓並向其中添加svg平移

d3.select("#b1").on("click", function () {
    var svg = d3.select("body").append("svg").attr("width", 300 + "px").attr("height", 300 + "px").attr("id", "svg1");

    var rectSelection = svg.append("circle")
        .attr("r", 50)
        .style("fill", "yellow");

    var m = svgPanZoom("#svg1", {
        panEnabled: true,
        controlIconsEnabled: false,
        zoomEnabled: true,
        dblClickZoomEnabled: true,
        mouseWheelZoomEnabled: true,
        zoomScaleSensitivity: 0.2,
        minZoom: 0.2,
        maxZoom: 3,
        fit: true,
        contain: true,
        center: true,
        refreshRate: 'auto'
    });
});

這里的工作代碼

希望這可以幫助！