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