D3.js 使用 d3 追加将"rect"元素添加到 svg 时不可见的矩形元素

Question

我有这个代码片段，我使用D3.js创建由十六进制代码数组给出的颜色1列网格。我将每个矩形元素的y位置设置为I *height(其中I是颜色十六进制代码的索引)。在输出中，我可以看到矩形元素，但最后一个(红色)是不可见的。

当我检查我的HTML时，我可以看到它在我需要的地方，它是不可见的。我如何调整我的代码，使最后一个rect可见?

let colors=['#2A4DE8','#2AA3E8', '#F6922E','#F62E2E'];

let legend=d3.select('#legend');
legend.selectAll('rect')
.data(colors)
.enter()
.append('rect')
.attr('fill', (color)=>{return color})
.attr('width', '50px')
.attr('height', '50px')
.attr('x', '0px')
.attr('y', (color,index)=>{return index*50})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<svg id="legend"></svg>

Answer 1

为了覆盖svg的默认高度150px，我将let legend=d3.select('#legend');改为let legend=d3.select('#legend').attr("height", "200px");。

[参见https://stackoverflow.com/a/40156993/5768908]

let colors=['#2A4DE8','#2AA3E8', '#F6922E','#F62E2E'];

let legend=d3.select('#legend').attr("height", "200px");
legend.selectAll('rect')
.data(colors)
.enter()
.append('rect')
.attr('fill', (color)=>{return color})
.attr('width', '50px')
.attr('height', '50px')
.attr('x', '0px')
.attr('y', (color,index)=>{return index*50})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<svg id="legend">

</svg>