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方法。

更新。如果将.html替换为.text，它“有效”，但我确实需要解析内容。

Answer 1

原来（正如您所发现的）Error: test() method does not exist没有d3.transition方法。 docs here中缺少.html()证实了这一点。这并不是完全出乎意料的，因为没有明显的方法可以解释transition.html值的连续转换意味着什么，但是再次innerHtml “可转换” ，就像你希望.remove()转换一样（即非连续，在转换结束时）。

好吧，好吧。您仍然可以通过使用.html()机制基本订阅转换结束来执行您想要执行的操作：

.each("end", function() {})

D3：在转换中更改html

1 个答案: