Javascript D3v4响应图例

我正在用D3V4构建一个地图响应的可视化系统，我在构建一个完全适应窗口大小的图例时遇到了一些麻烦

现在，当调整窗口的大小

.attr（“width”，“1em”）.attr（“height”，“1em”）

以及描述每个元素的文本大小

.attr（“x”，“1.8em”）

时，图例的每个元素都会进行调整

但是我在修改下面的行

.attr（“transform”，function（d，I）{return“translate（0，+I*20+”）；}）时遇到了一些问题，以便在窗口变小时减小每行之间的空间

你对解决这个问题有什么建议吗？谢谢你的帮助

我的代码的一小部分：

var legend = d3.select("#legendecontainer").append("svg")
    .attr("class", "legend")
    .selectAll("g")
    .data(color.domain())
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
    ;

legend.append("rect").attr("width", "1em")
    .attr("height", "1em").style("fill", color);

legend.append("text")
    .data(legendText).attr("x", "1.8em").attr("y", ".5em")
    .attr("dy", ".35em").text(function(d) { return d; });

如果正确设置svg，它将自动随容器大小进行缩放，而无需更改代码或根据em进行缩放（甚至像素单位也会进行缩放）。你的翻译是使用像素单位，所以它不是缩放，因为你已经设置好了。尝试在google中搜索“响应svg”。感谢您回答Dominic。事实上，我不想使用容器的直接缩放，以使文本的大小比其他元素的大小减少得慢，从而提高可读性。