D3 v3附加复选框? [英] D3 v3 appending checkbox?

问题描述

Am正在处理可折叠树顶到底的定向蛋白.在这里，我遇到了一些问题.要实现该树，请使用d3.v3.js.如何将复选框附加到每个节点的树中.

Am working with collapsible tree top to bottom orientatin. Here i stuck with some problem. To implement the tree am using d3.v3.js. How can i append check box into the tree for each node.

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

Checkbox in appending in to svg but not been visible in browser. Anybody please help me to solve this issue

推荐答案

您需要为foreignObjects(即复选框)创建一个持有人，而不是此行中的输入:

You need to be creating a holder for the foreignObjects (i.e. checkbox's) and not the inputs in this line:

svg.selectAll("input")

应为

svg.selectAll("foreignObject")

然后，您需要使用 data(data)中的数据来驱动复选框的数量，并将其与 enter()绑定，如前所述.如果要显示多个元素，则需要对x和y使用动态变量.在一个简单的示例中，将是 .attr('x'，函数(d，i){return d.x;}).因此，将所有内容放在一起放在小提琴中，就可以得到此.

you then need to drive the number of checkbox's with the data as in, data(data) and bind it with the enter(), as you've done. If you want multiple elements to appear you need to use dynamic variable for the x and y. In a simple example that would be .attr('x', function (d,i) { return d.x; }). So putting it all together in a fiddle you get this.

这篇关于D3 v3附加复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！