adding checkbox not getting displayed in d3.js -

i trying add checkbox not getting displayed.

var svg = d3.select("#mainchart").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");  svg.append('input').attr('type','checkbox').attr("x","400").attr("y","-215"); 

what issue here?

svg doesn't have checkbox element. add checkbox page, needs appended vanilla html element (in case, body of page):

d3.select("body").append('input').attr('type','checkbox') 

edit: control checkbox appears, select element instead of body:

d3.select("#checkboxdiv").append('input').attr('type','checkbox') 

would change this:

<div id="checkboxdiv></div> 

into this:

<div id="checkboxdiv>   <input type="checkbox"> </div> 

you hard code last line in html file , still select checkbox later with:

d3.select("#about").select('input')