Question

我在一个页面中使用D3，我的目标是叠加两组路径：我将地球海岸线作为背景地图（从GeoJSON文件导入），我想在其上叠加旧地图，是一个单独的SVG：http://bl.ocks.org/bperel/9943623/250fc9af2e09bf176f6d510e0b59fe643d792287

SVG加载进展顺利，但是我希望我的两个地图包含在同一个SVG元素中：如果我想要平移或缩放地图会更容易。这里的问题是外部SVG有一个特定的视图框，所以如果我移动它的＆lt; g＆gt;元素到另一个SVG，坐标变得凌乱。因此我的问题是：有没有办法将第二个SVG转换为＆lt; g＆gt;我可以包含在第一个SVG中的元素？也许d3知道如何做到这一点，但我无法在文档中找到这样的工具。

Answer 1

如果要缩放/平移叠加的SVG，请在<g>容器元素中包含两个 svg，并将缩放行为附加到<g>容器。

此时，您将拥有：

<svg id=topSVG>
<g id=container>
<svg id=projection1>
....
</svg>
<svg id=projection2>
....
</svg>
</g>
</svg>

以下是与d3的mouswheel zoom相关的片段：

var myZoom=d3.behavior.zoom().scaleExtent([.1, 1000]).on("zoom", mouseWheelZoom)

function callZoomBehavior()
{
    //---attach to root svg---
    d3.select("#"+SVGId)
    .call(myZoom)
    //---reset from previous file call---
    myZoom.translate([0,0])
    myZoom.scale(1)
    PrevScale=1
}

var PrevScale //--previous scale event---
function mouseWheelZoom()
{
    //--place in d3 object--
    var zoomG=d3.select("#topZoomG")
    if(PrevScale!=d3.event.scale) //--transition on scale change--
    {
        zoomG.transition().attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
    }
    else //--no transition on pan---
    {
        zoomG.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
    }
    PrevScale=d3.event.scale
}

Answer 2

originalSVG =要克隆并转换为g元素的SVG元素 quasiClone =结果 parentOfClone =您想要放置新g元素的父级

    var quasiClone = parentOfClone.append("g");
    for (var i=0; i<originalSVG.childNodes.length; i++){
        var child = originalSVG.childNodes[i];
        var childClone = child.cloneNode(true);
        quasiClone.node().appendChild(childClone);
    }

使用d3.js将SVG元素转换为g元素

2 个答案: