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标记。 Here is a simple example，正如您在问题上回答的那样here。

添加复选框不会显示在d3.js中

2 个答案: