将Zoom +拖动行为添加到加载到D3.js中的外部SVG可以通过以下步骤实现:
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.xml()
方法加载外部SVG文件,并在加载完成后执行回调函数。可以使用以下代码加载外部SVG文件:d3.xml("external.svg").then(function(externalSVG) {
svg.node().appendChild(externalSVG.documentElement);
});
var zoom = d3.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
var drag = d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
svg.call(zoom);
svg.call(drag);
function zoomed() {
svg.attr("transform", d3.event.transform);
}
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("active", false);
}
<circle class="zoomable draggable" cx="50" cy="50" r="20" fill="red"></circle>
然后,使用以下代码选择并应用Zoom和拖动行为:
svg.selectAll(".zoomable")
.call(zoom);
svg.selectAll(".draggable")
.call(drag);
这样,你就成功将Zoom +拖动行为添加到加载到D3.js中的外部SVG中了。
请注意,以上代码仅为示例,具体实现可能需要根据你的具体需求进行调整。另外,腾讯云相关产品和产品介绍链接地址可以根据具体情况进行选择和提供。
领取专属 10元无门槛券
手把手带您无忧上云