0
我打算在其他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>
我编辑我的帖子上面显示我的代码。它似乎并没有像使用两种缩放行为一样正常工作。缩放应用于svg和地图(组)。但平移不适用于地图。此外,只要鼠标悬停在地图上,我都不想应用缩放。 – t2k32316
您是否尝试过将'pan'应用于'#outer_group'而不是整个SVG?如何平移地图不起作用? –
将pan应用到#outer_group具有奇怪的行为。地图根本不能平移,但它可以缩放。 – t2k32316