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')

请参阅此箱以进行比较.

编辑

显然这种document.createElement('rect');方法不起作用(PS - 并且有充分的理由,请参见本答案的结尾).如果我得到它,原因是实际上通过使用该函数,元素确实在"外部"d3创建,因此您需要显式指定SVG名称空间.

D3在您使用时为您执行此操作.append('rect')(请参阅源代码),但您自己另行使用并使用.createElementNS.

如果事实证明是这种情况(我不是100%确定的话),那么打开一个PR可能值得指出你所指的DOC.

无论如何尝试:

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

这样它就可以了.另见Github评论和整个讨论.

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

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

我在这里更新了垃圾箱.