gpt4 book ai didi

javascript - D3。加载 SVG 文件并一次只显示一个。褪色/更换问题

转载 作者:行者123 更新时间:2023-11-28 03:59:31 29 4
gpt4 key购买 nike

我想将 svg 文件加载到一个 div(或其他)中,我什至可以成功地做到这一点 here :

var div_svg = d3.select("div#example");

svg1 = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg";
svg2 = "https://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg";

var createSvg = function(dataset) {
d3.xml(dataset)
.mimeType("image/svg+xml")
.get(function(error, xml) {
if (error) throw error;
div_svg.node().append(xml.documentElement);
});
}

update = function(dataset) {
div_svg.select('svg')
.style("opacity", 1)
.transition()
.duration(200)
.style("opacity", 0)
.remove();
createSvg(dataset)
}

createSvg(svg1);
d3.select("#one").on("click", function() { update(svg1); });
d3.select("#two").on("click", function() { update(svg2); });

但是我有一些问题:

  1. 一旦您要选择另一个 svg 文件,第一个文件会按原样淡出,但另一个文件会堆叠在下方,直到前一个文件完全消失。如何顺利地将一个 svg 替换为另一个?

  2. 如果我继续快速单击 svg“按钮”,div 中会出现多个图表。我可以做一个肮脏的修复,只是检查 svg 是否已经呈现,但我想弄清楚如何以更好的方式解决这个异步更新问题。

谢谢

最佳答案

所以我会做的是:在加载 svg 之后等待进行淡出先前 svg 的过渡,然后等待过渡完成,删除旧的,添加新的并淡入:

var createSvg = function(dataset) {
d3.xml(dataset)
.mimeType("image/svg+xml")
.get(function(error, xml) {
d3.select("#example")
.select('svg')
.style("opacity", 1)
.transition()
.duration(200)
.style("opacity", 0);

setTimeout(function(){
d3.select("#example")
.select('svg').remove();

div_svg.node().append(xml.documentElement);

d3.select("#example")
.selectAll('svg') .select('svg')
.style("opacity", 0)
.transition()
.duration(200)
.style("opacity", 1);
}, 200);

if (error) throw error;
});
};

update = function(dataset) {
createSvg(dataset)
};

关于javascript - D3。加载 SVG 文件并一次只显示一个。褪色/更换问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43285190/

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