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相匹配？

编辑：我刚刚意识到＆＃34; onclick＆＃34;因为它也附属于＆＃34; g＆＃34; ，但我仍然对答案感兴趣。

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>元素，它有一个变换，因此矩形被转换。

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

1 个答案: