如何将<p>标签附加到D3.JS中的外来对象</p>

Question

在D3中，我创建了一个带有圆圈和文本的组元素。但我希望文本在html中，以便我可以添加内联样式。我知道你需要附加一个foreignObject来使用html文本......所以我做了这个：

var focusCPIfore = canvasCPI.append("g")

focusCPIfore.append("circle").attr("r", 5);
focusCPIfore.append("foreignObject").append("xhtml:body").attr("class", "sansserifbold");

然后我在一个函数内部有一个这样的函数，所以当它被调用时（希望）将文本添加到我刚刚附加的body标签中。到目前为止，这没有错误：

        focusCPIfore.select("foreignObject")
        .transition()
        .delay(300)
        .select("xhtml:body");   

..但是如果选择了html文本到该body标签，该如何添加？我试过这个，但它不起作用：

        focusCPIfore.select("foreignObject")
        .transition()
        .delay(300)
        .select("xhtml:body").html(<p></p>);  

Answer 1

虽然您确实需要通过.html方法插入HTML字符串的引号，但看起来您不需要再次重新指定名称空间。

Mike实际上有一个非常简单的例子：

https://gist.github.com/mbostock/1424037

Answer 2

根据Lars Kotthoff的建议，你需要引用内容：

.select("xhtml:body").html("<p></p>"); 

但是我不确定在foreignObject上下文中就足够了，我认为您还应该像xhtml那样添加xhtml:body命名空间。这会给：

.select("xhtml:body").html("<xhtml:p></xhtml:p>");