D3 v3附加复选框？答案

【问题标题】：D3 v3 appending checkbox?D3 v3附加复选框？
【发布时间】：2013-10-09 04:56:48
【问题描述】：

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

    // 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 但在浏览器中不可见。有人请帮我解决这个问题

【问题讨论】：

标签： javascript html svg d3.js

【解决方案1】：

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

svg.selectAll("input")

应该是

svg.selectAll("foreignObject")

然后，您需要使用data(data) 中的数据驱动复选框的数量，并将其与enter() 绑定，就像您所做的那样。如果要出现多个元素，则需要对 x 和 y 使用动态变量。在一个简单的例子中是.attr('x', function (d,i) { return d.x; })。所以把它们放在一起，你会得到this。

【讨论】：

我在使用 d3.v3.js 是不是这个 js 没问题
fiddle使用的是3.0.4版本，我用d3网站上的版本测试过，应该没问题！

【解决方案2】：

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

#canvas {
  position: relative;
}

然后使用以下方法附加复选框元素：

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

【讨论】：

希望为与图像相关的每个点附加复选框。用户可以通过单击复选框来选择特定图像。

【解决方案3】：

这个答案对那些使用 Bootstrap 的人更有用。要在引导程序中附加复选框，我们需要在附加外部时指定 label 和 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>");

【讨论】：