d3.append（）的奇怪行为

Question

我试图使用函数作为d3.append的输入将一个rect附加到一个svg元素。奇怪的是，当我检查页面时，元素显示在dom中，但它没有被渲染。

我还附上了一个有问题的JSBin。你可以看到只有1个矩形正在渲染，而应该有2个。

https://jsbin.com/folehubita/edit?html,output

更新

我意识到标准方法是提供标签类型的字符串，但我的问题有点超出此范围，我需要在函数内构建一个元素。

记录此功能。 https://github.com/d3/d3-selection/blob/master/README.md#selection_append

Answer 1

只需将.append方法更改为：

svg
.append('rect') // <= notice the difference
.attr('x', 0)
.attr('width', 10)
.attr('height', 10)
.attr('fill', 'red')

请参阅此bin进行比较。

修改

显然document.createElement('rect');方法不起作用（ PS - 并且有充分理由，请参阅此答案的结尾）。 如果我得到它，原因是实际上通过使用该函数，元素确实被创建了＆＃34;外部＆＃34; d3所以you need to explicitly specify the SVG namespace。

D3会在您使用.append('rect')时为您执行此操作（请参阅source），但您已自行执行此操作，并使用.createElementNS。

如果情况确实如此（我不是100％肯定的话），可能值得打开一个公关指出你所引用的DOC。

无论如何尝试：

svg
  .append(function() { 
    return document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  })

这样就可以了。 另见Github comment以及整个讨论。

经过一些研究后，我认为发生的事情是有道理的，因为默认情况下使用xhtml命名空间创建元素，但在这种特殊情况下，它最终会出错。

要证明如果在你的原始bin中检查控制台svg元素在那里，但它是不可见的，即使你指定它也不占用空间。如果您从控制台中选择它并记录其namespaceURI，那么您会发现它实际上有错误的"http://www.w3.org/1999/xhtml"而不是http://www.w3.org/2000/svg。

我更新了bin here。