SVGでチェックボックスを使いたい時はforeignObjectのタグを使う

<script type="text/javascript">
    var svg = d3.select("body").append("svg")
        .attr("width", 100)
        .attr("height", 100);

    svg.append("foreignObject")
        .attr("width", 100)
        .attr("height", 100)
        .append("xhtml:body")
        .html("<form><input type=checkbox id=check /></form>")
        .on("click", function(d, i){
            console.log(svg.select("#check").node().checked);
        });
</script>


http://bl.ocks.org/biovisualize/3085882
https://developer.mozilla.org/ja/docs/Web/SVG/Element/foreignObject

d3で子のHTMLの子エレメントとSVGの子エレメントを削除する方法はちょっと違う

HTMLの要素の場合：
d3.select("div.parent").html("");

SVGの要素の場合：
d3.select("g.parent").selectAll("*").remove();


http://stackoverflow.com/questions/14422198/how-do-i-remove-all-children-elements-from-a-node-and-them-apply-them-again-with