- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将 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); });
但是我有一些问题:
一旦您要选择另一个 svg 文件,第一个文件会按原样淡出,但另一个文件会堆叠在下方,直到前一个文件完全消失。如何顺利地将一个 svg 替换为另一个?
如果我继续快速单击 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/
我对 jQuery 还很陌生,但我正在寻找一个简单的脚本,通过淡入和淡出的方式在标题中循环 3 或 4 个背景图像。它们是透明的 png,因此我尝试过的许多 slider 都不起作用。 有什么想法吗?
我需要一个用 Java 编写的颜色褪色示例。我的要求是我有两个矩形。一个填充红色,另一个填充白色。当我点击任何按钮时,我希望红色开始褪色并移动绿色。一旦到达绿色位置,另一个矩形就会自动从黄蓝色开始。有
尝试设置 UIAlertController backgroundColor 但结果是“褪色”颜色 let alert = UIAlertController(title: "some title",
我正在尝试制作一个带有渐变 block 动画的 slider ,就像 here .问题是,在我的例子中,我试图全屏显示,这意味着高度和宽度将是可变的。这意味着背景位置技巧将不起作用,因为它不会调整背景
这是我想要的东西achieve . 类似于 this 的东西*但这会通过使用颜色而褪色。 Long wordingggggggggggggggggggggggggggggggggggg
我用 glColor3f() 和 GL_QUAD_STRIP 绘制了 2 个相邻的方 block ,但它们似乎在 2 个方 block 之间褪色,有什么办法可以防止这种情况发生吗?或者 GL_QUAD
我正在开发一个用户脚本,该脚本将缺失的功能添加到我无法控制的第 3 方网站。 它将根据页面和一些 webAPI 调用的结果计算 URL。这些 URL 将添加到页面的 HTML 中。 然后对于呈现为 :
我只是想在页面上有一个特定的部分来交换内容(比如 3 个不同的元素),并具有淡入淡出的效果。所以我想我可以为内容部分定义我的容器属性,然后我可以定义将换入和换出的 3 个 div 容器中的每一个。因此
我在 bootstrap carousel 上苦苦挣扎了几天,它应该像默认的那样向左/向右滑动,但增加了淡化(新元素进入时慢慢获得不透明度,而前一个元素在移出时慢慢失去不透明度),我尝试了很多变体,但
我对 Qt 的样式表功能有一些疑问。这真的很棒,但感觉这个功能还没有出现太久,真的吗?这是迄今为止最简单的方式来设置我的 GUI 样式。 是否可以在样式表中添加褪色?每当鼠标悬停在某个小部件上时,我不
我正在使用以下命令 ffmpeg -i ~/Desktop/input.mp4 -filter_complex "color=black:100x100[c];\ [c][0]scale2r
我正在尝试实现一个“返回顶部”链接,该链接会在用户向下滚动页面一定量后淡入我的页面。 我注意到在我的某些页面上,“返回顶部”链接会在页面上闪烁,然后再自行隐藏,但在其他页面上则不会。为了找出“链接闪烁
我想将 svg 文件加载到一个 div(或其他)中,我什至可以成功地做到这一点 here : var div_svg = d3.select("div#example"); svg1 = "https
我是一名优秀的程序员,十分优秀!