Svg-與d3放置的異物不會渲染

Question

Check out my jsbin here

我想要一些環繞文字。在recommendation from this post之後，我創建了一個foreignObject並附加了一個'p'元素。

我的文本根本不顯示。

現在，當我在標記中執行完全相同的事情時，它顯示了（我只是將生成的svg代碼放入svg主體中）。

哎呀，如果我右鍵去devtools，右鍵點擊svg，選擇「編輯爲html」並在</svg>右括號前插入一個新行，我的文本顯示出來。

什麼給？

Answer 1

更換

.append('p') 
    .attr('xmlns', 'http://www.w3.org/1999/xhtml') 

與

.append('xhtml:p') 

命名空間創建在JavaScript中的節點時都特別的東西，不能被視爲屬性。 d3使用上面的語法來解決這個問題。