D3中的复选框没有正确响应

Question

我正在利用异物为我的数据中的每个元素添加一个复选框，使用此代码使用D3显示：

rect.append("g")
    .append("foreignObject")
    .filter(function (d) { return d.children || d.fileType == "File folder"; })
    .attr("class", "Rect")
    .on("mouseover", mouseover)
        .on("click", nameClicked)
        .attr("width", 20)
        .attr("height", 20)
        .attr("transform", function (d) {
             return "translate(" + [(x(d.x)), (y(d.y))] + ")" + "scale(1)";
         })
        .append("xhtml:rect")
        .html("<input type=checkbox id=check />")
        .on("click", function(d, i){
            console.log("clicked check"+ svg.select("#check").node().checked);  
           if(svg.select("#check").node().checked)
            {
                copyClick.push(d);
                svgCopy.push(svg);
            }           
        });

但我有两个问题：

1. 有时复选框不可选 - 如果单击它，则不会始终显示勾号;
2. 如果我在图表中选择一个节点，也会选择根目录。



我不确定是否有人可以帮助解决这些问题？

修改

我现在已经得出结论，问题不在于rect，而在于叶子：

var leaves = svg.selectAll(".leaves").data(nodes, keyFunction).enter().append("g")
            .filter(function (d, i) {
                return !d.children && d.fileType != "File folder"  && d.dx >0.01;
            }).attr("class", "leaves")
            .attr("transform", function (d) { 
                return "translate(" + [(x(d.x)), (y(d.y))] + ")" + "scale(1)";
            })
            .on("mouseover", mouseover)
            .on("click", nameClicked);

leaves.append("image")
        .attr("xlink:href", function (d) {
            if (d.fT == "Document")
                return "images/document512d.png";
            if (d.fT == "Music")
                return "images/music/music2-256m.png";
            if (d.fT == "Picture")
                return "images/pictures/image2-256i.png";
            if (d.fT == "Video")
                return "images/video/play-256p.png";
            if (d.fT == "Other")
                return "images/other/other.png";
            return "images/other/other.png";

        })
        .attr("height", function (d) { /*console.log("y(d.dy): " + y(d.dy));*/return y(d.dy); })
        .attr("title", function (d) {
            return "";
        });

leaves.append('rect')
        .attr('class', 'image-border')
        .attr('width', function (d) { console.log(d); console.log("image-border: "+d.dx);return x(d.dx); })
        .attr('height', function (d) { console.log("image-border: "+d.dy); return y(d.dy); });

leaves.attr("class", "leaves").append("foreignObject")
        .style("margin-left","0px")
        .attr("width", 10)
        .attr("height", 20)
        .attr("transform", function (d) {
                return "translate(" + [((d.x)), ((d.y))] + ")" + "scale(1)";
            })
        .append("xhtml:div")
        .html("<input type=checkbox id=check />")
        .on("click", function(d, i){
            console.log(svg.select("#check").node().checked);
        });