D3:在转换中更改html [英] D3: change html in transition
问题描述
在这个(最小的)最小示例中，我希望文本淡出，在不可见的情况下进行更改，并以更改后的内容重新出现.这应该很简单(不交叉淡入淡出)，但是错误消息抱怨 .html 不是一个函数.
In this (broken) minimal example, I want the text to fade out, change while invisible, and reappear with the changed content. This should be simple (no cross-fading), but the error message complains that .html is not a function.
<!DOCTYPE html>
<title>Image mask</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js">
</script>
<body>
</body>
<script>
var textbox = d3.select('body').append('div');
textbox
.html('Click me.')
.style('cursor','pointer');
var i = 0;
textbox.on('click', function() {
i++;
textbox.transition()
.style('opacity', 0)
.transition().duration(300)
.html('Click me. <strong>' + i + '</strong>')
.transition().transition()
.style('opacity', 1);
});
</script> PS我找到了交叉渐变的示例，但它似乎不必要复杂(因为我不需要交叉淡入淡出)，并且需要版本4的 .active 方法.
PS I found an example for cross-fading, but it seems unnecessary complicated (since I don't want cross-fading) and requires version 4's .active method.
更新.如果将 .html 替换为 .text ，则有效"，但我确实需要解析内容.
Update. It "works" if .html is replaced with .text, but I really need the content to be parsed.
推荐答案
发现(如您所知) d3.transition 没有 .html()方法. .html()一样(即，在转换结束时不连续).
Turns out (as you've discovered) that d3.transition doesn't have a .html() method. This is confirmed by the lack of transition.html in the docs here. That's not totally unexpected, considering that there is no obvious way to interpret what it means to do a continuous transition of the innerHtml value, but then again .remove() is "transitionable", in the same way you would want .html() to be transitioned (i.e. non-continuously, right at the end of the transition).
哦，很好.您仍然可以使用 .each("end"，function(){})机制从本质上订阅过渡结束，从而完成您想做的事情:
Oh well. You can still do what you want to do by essentially subscribing to the end of the transition, using the .each("end", function() {}) mechanism:
<!DOCTYPE html>
<title>Image mask</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js">
</script>
<body>
</body>
<script>
var textbox = d3.select('body').append('div');
textbox
.html('Click me.')
.style('cursor','pointer');
var i = 0;
textbox.on('click', function() {
i++;
textbox.transition()
.style('opacity', 0)
.each("end", function() {
d3.select(this)
.html('Click me. <strong>' + i + '</strong>')
.transition()
.style('opacity', 1);
})
});
</script>这篇关于D3:在转换中更改html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
