D3：过渡中改变html

Question

在这个（损坏的）最小示例中，我希望文本淡出，在不可见的情况下发生变化，然后随着更改的内容重新出现。这应该很简单（没有淡入淡出），但错误消息抱怨 .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 我找到了 cross-fading 的示例，但它似乎没有必要复杂（因为我不想交叉淡化）并且需要版本 4 的 .active 方法。

更新。 "works"如果.html换成.text，但我确实需要解析的内容

Answer 1

事实证明（如您所见）d3.transition 没有 .html() 方法。 docs here 中缺少 transition.html 证实了这一点。这并不完全出乎意料，考虑到没有明显的方法来解释 innerHtml 值的连续转换意味着什么，但是 .remove() 是 "transitionable"，以与您希望 .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>

D3：过渡中改变html

D3: change html in transition

javascript

transition

d3.js