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

Question

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

SVG 加载顺利，但我希望我的两张 map 包含在同一个 SVG 元素中:如果我希望平移或缩放 map 会更容易。这里的问题是外部 SVG 有一个特定的 View 框，所以如果我将它的 元素移动到另一个 SVG，坐标就会变得困惑。因此我的问题是:有没有办法将第二个 SVG 转换为可以包含在第一个 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 鼠标滚轮缩放相关的片段:

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
}