bon*_*ang 1 javascript transition d3.js
在这个（损坏的）最小示例中，我希望文本淡出，在不可见时更改，并以更改后的内容重新出现。这应该很简单（没有交叉淡入淡出），但错误消息抱怨这.html不是一个函数。
<!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方法。
更新。如果.html替换为.text，它“有效” ，但我确实需要解析内容。
结果（如您所见）d3.transition没有.html()方法。这由缺乏transition.html在此处文档中。考虑到没有明显的方法来解释对innerHtml值进行连续转换意味着什么，这并非完全出乎意料，但又.remove() 是“可转换的”，就像您希望.html()被转换的方式（即非连续，就在过渡结束时）。
那好吧。您仍然可以使用以下.each("end", 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)
.each("end", function() {
d3.select(this)
.html('Click me. <strong>' + i + '</strong>')
.transition()
.style('opacity', 1);
})
});
</script>