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

d3 foreignObjects, adding checkbox and text from data

本文关键字：文本 数据 复选框 foreignObjects 添加 d3      更新时间：2023-09-26

用外部对象追加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>")

上面的代码可以工作，但是如果我尝试将span/label与复选框一起放置，那么也可以工作，但仅当使用纯文本值时。我想从下面的

数据动态地创建标签
html("<form><input type=checkbox id=check class=tick/><span>"+function(d){return d.name;}+"</span></form>")

但是它不计算函数并输出文本"function(d){return d.name;}"作为标签。我哪里做错了?

您需要向html()传递一个函数或字符串，而不是与函数连接的字符串。这应该可以工作:

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