如何在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轉化。