Question

我正在使用d3 v4构建制图响应式可视化，而我在构建完全适应窗口大小的图例方面遇到了一些麻烦。

现在，在调整窗口大小.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; });

D3v4响应式传奇

0 个答案: