d3.js - 添加复选框未在 d3.js 中显示

Question

我正在尝试添加一个复选框，但它没有显示出来。

var svg = d3.select("#mainchart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append('input').attr('type','checkbox').attr("x","400").attr("y","-215");

这里有什么问题？

Answer 1

svg没有复选框元素。要将复选框添加到页面，需要将其附加到 vanilla html 元素（在本例中为页面主体）：

d3.select("body").append('input').attr('type','checkbox')

编辑：要控制复选框出现的位置，请选择另一个元素而不是正文：

d3.select("#checkBoxDiv").append('input').attr('type','checkbox')

会改变这一点：

<div id="checkBoxDiv></div>

进入这个：

<div id="checkBoxDiv>
  <input type="checkbox">
</div>

您还可以对 html 文件中的最后一行进行硬编码，稍后仍选择该复选框：

d3.select("#about").select('input')

Answer 2

如果不使用 foreignObject，就不能在 svg 命名空间中包含 html 标签。这是一个简单的示例，正​​如您在此处交叉发布的问题中所回答的那样。