javascript - How to append a rectangle in SVG/3Djs? -

here part of code got example:

svg = d3.select("body")     .append("svg")         .attr("width", width + margin.left + margin.right)         .attr("height", height + margin.top + margin.bottom)     .append("g")         .attr("transform", "translate(" + margin.left + "," + margin.top + ")").on("click", click) ; 

and here trying based on other example:

var rect = svg.append("rect")     .attr("x", 0)     .attr("y", 0)     .attr("height", height)     .attr("width", width)     .style("fill", '#000'); rect.on("click", click); 

click works, cannot known th clickable zone located, not covering chart, somewhere in corner of it. tried give colour (black in case), still stay invisible.

i have tried

var rect = svg.append("rect")     .attr("x", margin.left)     .attr("y", margin.top)     .attr("height", height + margin.top + margin.bottom)     .attr("width", width + margin.left + margin.right)     .style("fill", '#000'); rect.on("click", click); 

no better result.

questions:

• how can give rectangle colour can know on page?
• how can have rectangle match whole svg?

edit: have realised "onclick" works because attached "g" , still interested in answers.

you have given colour, #000 i.e. black.

the trouble here

svg = d3.select("body")     .append("svg")         .attr("width", width + margin.left + margin.right)         .attr("height", height + margin.top + margin.bottom)     .append("g")         .attr("transform", "translate(" + margin.left + "," + margin.top + ")").on("click", click) ; 

the svg variable not <svg> element, because of chaining it's <g> element, has transform on rect transformed.