Javascript D3V3追加复选框？

我正在使用可折叠树从上到下的方向。在这里，我遇到了一些问题。 使用d3.v3.js实现树am。如何将复选框附加到每个节点的树中

    // Create the link lines.
    svg.selectAll(".link")
        .data(links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", d3.svg.diagonal().projection(function(d) { return [o.x(d)+15, o.y(d)]; }));

        svg.selectAll("input")
        .data(nodes)
        .enter().append("foreignObject")
        .attr('x' , o.x)
        .attr('y',  o.y)
        .attr('width', 50)
        .attr('height', 20)
        .append("xhtml:body")
        .html("<form><input type=checkbox id=check></input></form>")
     .on("click", function(d, i){
            console.log(svg.select("#check").node().checked) 
            }) ;

    svg.selectAll("image")
        .data(nodes)
     .enter().append("image")
        .attr('x' , o.x)
        .attr('y',  o.y)
        .attr('width', 30)
        .attr('height', 20)
        .attr("xlink:href", "check.png")
  }); 
});

//创建链接行。
svg.selectAll（“.link”）
.数据（链接）
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，d3.svg.diagonal（）.projection（函数（d）{return[o.x（d）+15，o.y（d）]；}）；
svg.selectAll（“输入”）
.数据（节点）
.enter（）.append（“外来对象”）
.attr（'x'，o.x）
.attr（'y'，o.y）
.attr（'宽度'，50）
.attr（'height'，20）
.append（“xhtml:body”）
.html（“”）
.on（“点击”），功能（d，i）{
console.log（svg.select（“#check”）.node（）.checked）
}) ;
svg.selectAll（“图像”）
.数据（节点）
.enter（）.append（“图像”）
.attr（'x'，o.x）
.attr（'y'，o.y）
.attr（'宽度'，30）
.attr（'height'，20）
.attr（“xlink:href”，“check.png”）
}); 
});

---

添加到svg中但在浏览器中不可见的复选框。任何人请帮助我解决此问题

您的复选框不会出现，因为您无法将任意html元素附加到svg。应使用或浮动元素：

#canvas {
  position: relative;
}

然后使用以下命令追加复选框元素：

d3.select("#canvas")
  .append("input")
  .attr("type", "checkbox")
  .style("position", "absolute")
  .style("top", "320")
  .style("left", "150")

---

您的复选框不会出现，因为您无法将任意html元素附加到svg。应使用或浮动元素：

#canvas {
  position: relative;
}

然后使用以下命令追加复选框元素：

d3.select("#canvas")
  .append("input")
  .attr("type", "checkbox")
  .style("position", "absolute")
  .style("top", "320")
  .style("left", "150")

---

您需要为外来对象（即复选框）而不是此行中的输入创建一个持有者：

svg.selectAll("input")

应该是哪一个

svg.selectAll("foreignObject")

---

然后，您需要使用数据驱动复选框的数量，如，

data（data）

中所示，并使用

enter（）

将其绑定。如果希望显示多个元素，则需要对x和y使用动态变量。在一个简单的例子中是

.attr（'x'，function（d，i）{returnd.x；}）

。因此，将所有内容放在一把小提琴中即可。

您需要为外来对象（即复选框）而不是此行中的输入创建一个支架：

svg.selectAll("input")

应该是哪一个

svg.selectAll("foreignObject")

---

然后，您需要使用数据驱动复选框的数量，如，

data（data）

中所示，并使用

enter（）

将其绑定。如果希望显示多个元素，则需要对x和y使用动态变量。在一个简单的例子中是

.attr（'x'，function（d，i）{returnd.x；}）

。因此，把所有这些都放在一起，你会得到一把小提琴。

这个答案比那些使用引导的人更有用。要在引导中附加复选框，我们需要在附加外来对象时指定标签和span。否则，它在浏览器中不可见

 svg.selectAll("foreignObject")
   .data(nodes).enter()
   .append("foreignObject")
   .attr('x', o.x)
   .attr('y',  o.y)
   .attr('width', 30)
   .attr('height', 20)
   .append("xhtml:tree")
   .html("<label class='inline'><input type='checkbox'><span class='lbl'> </span>               </label>");

svg.selectAll（“外来对象”）
.data（节点）。输入（）
.append（“外来对象”）
.attr（'x'，o.x）
.attr（'y'，o.y）
.attr（'宽度'，30）
.attr（'height'，20）
.append（“xhtml:tree”）
.html（“”）；

这个答案对于使用引导的人更有用。要在引导中附加复选框，我们需要在附加外来对象时指定标签和span。否则，它在浏览器中不可见

 svg.selectAll("foreignObject")
   .data(nodes).enter()
   .append("foreignObject")
   .attr('x', o.x)
   .attr('y',  o.y)
   .attr('width', 30)
   .attr('height', 20)
   .append("xhtml:tree")
   .html("<label class='inline'><input type='checkbox'><span class='lbl'> </span>               </label>");

svg.selectAll（“外来对象”）
.data（节点）。输入（）
.append（“外来对象”）
.attr（'x'，o.x）
.attr（'y'，o.y）
.attr（'宽度'，30）
.attr（'height'，20）
.append（“xhtml:tree”）
.html（“”）；

我希望为与图像相关的每个点添加复选框。用户可以通过单击复选框来选择特定图像。我希望为与图像相关的每个点添加复选框。用户可以通过单击复选框来选择特定图像。我使用d3.v3.js。js是否可以使用小提琴版本3.0.4，我在d3网站上用这个版本进行了测试，所以应该没问题！我用的是d3.v3.js，js可以吗？fiddle用的是3.0.4版，我在d3网站上用这个版本测试过，所以应该可以！