放大d3.js中的多個區域

我打算在其他svg元素旁邊的svg中包含一個geoJSON映射。我希望能夠在地圖上縮放（縮放+平移），並使用邊框將地圖保持在同一位置。我可以通過使用clipPath將地圖保持在矩形區域內來完成此操作。問題是我也想在我的整個svg上啓用縮放和平移。如果我做了d3.select（「svg」）。call（myzoom）;這會覆蓋我應用於我的地圖的任何縮放。如何將縮放應用於我的整個svg和我的地圖？也就是說，當我的鼠標位於地圖的邊界框中時，我想能夠在地圖上縮放+平移，當鼠標位於邊界框外時，在整個svg上縮放+平移。放大d3.js中的多個區域

以下是示例代碼：http://bl.ocks.org/nuernber/aeaac0e8edcf7ca93ade。

<svg id="svg" width="640" height="480" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <clipPath id="rectClip"> 
     <rect x="150" y="25" width="400" height="400" style="stroke: gray; fill: none;"/> 
    </clipPath> 
    </defs> 
    <g id="outer_group"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> 
    <g id="svg_map" style="clip-path: url(#rectClip);"> 
    </g> 
    </g> 
</svg><br/> 
<script type="text/javascript"> 
    var svg = d3.select("#svg_map"); 
    var mapGroup = svg.append("g"); 
    var projection = d3.geo.mercator(); 
    var path = d3.geo.path().projection(projection); 

    var zoom = d3.behavior.zoom() 
     .translate(projection.translate()) 
     .scale(projection.scale()) 
     .on("zoom", zoomed); 
    mapGroup.call(zoom); 

    var pan = d3.behavior.zoom() 
     .on("zoom", panned); 
    d3.select("svg").call(pan); 

    mapGroup.attr("transform", "translate(200,0) scale(2,2)"); 
    d3.json("ne_110m_admin_0_countries/ne_110m_admin_0_countries.geojson", function(collection) { 
     mapGroup.selectAll("path").data(collection.features) 
     .enter().append("path") 
     .attr("d", path) 
     .attr("id", function(d) { return d.properties.name.replace(/\s+/g, "")}) 
     .style("fill", "gray").style("stroke", "white").style("stroke-width",1); 
    } 
); 

    function panned() { 
    var x = d3.event.translate[0]; 
    var y = d3.event.translate[1]; 
    d3.select("#outer_group").attr("transform", "translate("+x+","+y+") scale(" + d3.event.scale + ")"); 
    } 

    function zoomed() { 
    previousScale = d3.event.scale; 
    projection.translate(d3.event.translate).scale(d3.event.scale); 
    translationOffset = d3.event.translate; 
    mapGroup.selectAll("path").attr("d", path); 
    } 
</script>

來源

2013-06-28 t2k32316

您需要兩個zoom行爲。第一個將附加到SVG，第二個附加到地圖。在縮放處理程序中，您必須注意爲每個處理程序採取適當的操作。

來源

2013-06-28 21:11:12

我編輯我的帖子上面顯示我的代碼。它似乎並沒有像使用兩種縮放行爲一樣正常工作。縮放應用於svg和地圖（組）。但平移不適用於地圖。此外，只要鼠標懸停在地圖上，我都不想應用縮放。 – t2k32316

您是否嘗試過將'pan'應用於'＃outer_group'而不是整個SVG？如何平移地圖不起作用？ –

將pan應用到#outer_group具有奇怪的行爲。地圖根本不能平移，但它可以縮放。 – t2k32316

放大d3.js中的多個區域

回答

相關問題