Question

修改d3设置中已存在的节点的一般方法是：

var bound = d3.select('ul#myList').selectAll('li').data(myData);
var updating = bound.transition().attr('width', function(d) { return d.width; });
var entering = bound.enter().append('li').attr('width', function(d) { return d.width; });

但是，尝试更新某些内容的HTML内容时会出现问题。 html()方法不具有动画效果，因此在转换选择时甚至不可用（.html未定义）。换句话说，以下不起作用：

bound.transition().html(function(d) { return d.contents; });

因为html()未定义;

text()方法仍可用于替换节点的内容，但不能解析HTML标记。

那么，如何插入HTML并将其解释为HTML到D3中的转换节点？可以在http://codepen.io/MidnightLightning/pen/wBJGxr?editors=101

找到说明问题的Codepen

编辑：进一步处理后，似乎这个问题是由于误解了d3选择和转换之间的区别。

输出data()是一个选择，而transition()，enter()和exit()的输出是过渡。

替代方案（可能更符合预期用途）解决方案是：

var updating = d3.select('ul#myList').selectAll('li').data(myData);

// First insert elements needing to be added to the DOM
var entering = bound.enter().append('li');

// Modify un-transition-able elements
updating.html(function(d) { return d.contents; });

// Transition the transition-able elements
updating.transition().attr('width', function(d) { return d.width; });

Answer 1

我发现的一个解决方案是使用each()迭代器并直接操作.innerHTML：

bound.transition.each(function(d) { this.innerHTML = d.contents; });

这是最好的方法，还是现有功能提供此功能？

修改HTML内容以更新D3js中的节点？

1 个答案: