gpt4 book ai didi

javascript - 如何使用 d3.js 将外部组添加到现有 svg?

转载 作者:行者123 更新时间:2023-11-29 17:34:52 24 4
gpt4 key购买 nike

假设我用 d3.js 创建了一个 svg:

svg = d3.select('.svgContainer').append("svg")
.attr("width", '100%')
.attr("height", '100%')
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
.append("g");

我现在想向其中添加不同的组(动态地和来自不同的文件)。比如那个:

<svg>
<g id="myGroup">
<rect width="100" height="100" fill="blue" />
</g>
</svg>

我知道,我可以像那样添加整个 svg(假设文件名为 test.svg):

d3.xml("test.svg").then(function(xml) { 
var svgNode = xml.getElementsByTagName("svg")[0];
svg.node().appendChild(svgNode);
});

但是,这会产生以下 DOM:

svg
-svg
--myGroup

但是因为我需要根据主 svg 转换我的组,所以我需要以下 DOM 结构:

 svg
-myGroup
--(eventually more dynamically added groups)

我已经尝试了以下并获得了正确的 DOM,但是该组没有出现在我的 svg 中:

d3.xml("test.svg").then(function(xml) { 
var svgGroup = xml.getElementById("myGroup");
svg.node().append(svgGroup);
});

编辑:我发现,这应该已经可以工作了,问题是我有几个关键的 <defs>在我的 SVG 中(例如渐变)。当我只附加该组时,我丢失了它们。我结束了,包装我的 <g> <defs>周围现在一切正常。

最佳答案

作为对 accepted answer 的补充:如果你想要一个纯 D3 解决方案,你可以使用 selection.append 和一个函数。在你的情况下:

d3.xml(svgfile).then(function(xml) { 
var svgNode = d3.select(xml).select("#MyGroup");
svg.append(() => svgNode.node()) ;
});

或者更短:

d3.xml(svgfile).then(function(xml) { 
svg.append(() => d3.select(xml).select("#MyGroup").node()) ;
});

这是一个使用其他答案中链接的维基百科 SVG 的演示:

var svgfile = "https://simple.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg";

var svg = d3.select('body').append("svg")
.attr("width", '120')
.attr("height", '20');

d3.xml(svgfile).then(function(xml) {
var svgNode = d3.select(xml).select("#Wikipedia");
svg.append(() => svgNode.node());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

关于javascript - 如何使用 d3.js 将外部组添加到现有 svg?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57725403/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com