如何在SVG/3Djs中添加一个矩形？

Question

这里是代码的一部分，我从一些例子有：

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) 
; 

这里是什么，我想基于一些其他的例子做：

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

点击的作品，但我不能已知在可点击区域所在的位置，它没有覆盖我的图表，而是位于其角落的某处。所以我试图给它一个颜色（在这种情况下是黑色），但仍然保持隐形。

我也曾尝试

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); 

没有更好的结果。

问题：

• 我怎样才能把我的矩形颜色，这样我可以知道它在哪里 在网页上？
• 如何让我的矩形匹配整个SVG？

编辑：我刚刚意识到，“onclick”的作品，因为它也附加到“克”，但我仍然对答案感兴趣。

Answer 1

您给它一种颜色，＃000即黑色。

麻烦的是这里

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) 
; 

SVG的变量不是<svg>元素，因为链接的它的<g>元素，其上有一个转变，因此RECT转化。