javascript - d3 foreignObjects，从数据中添加复选框和文本

Question

附加一个带有外部对象的 html 复选框和文本。

.attr("id",function(d){return d.id;})
        .append("foreignObject")
          .attr("width", 200)
          .attr("height", 200)
          .attr("x",0)
          .attr("y",0)
          .append("xhtml:body")
          .html("<form><input type=checkbox id=check class=tick/></form>")

上面的代码有效，但如果我尝试将跨度/标签与复选框一起放置，那也有效，但前提是使用纯文本值。我想根据下面的数据动态地做标签

html("<form><input type=checkbox id=check class=tick/><span>"+function(d){return d.name;}+"</span></form>")

但它不计算函数并输出文本“function(d){return d.name;}”作为标签。我在这里做错了什么？

Answer 1

您需要向 html() 传递函数或字符串，而不是与函数连接的字符串。这应该有效:

.html(function(d) {return "<form><input type=checkbox id=check class=tick/><span>" + d.name + "</span></form>";})