Question

我正在尝试在响应式d3.js图表中保持文本元素的大小。

我已经在svg元素上设置了viewBox和preserveAspectRatio属性以获取响应度，但是这会缩放所有svg元素，包括文本。我尝试将font-size设置为属性和CSS中的内容，但是文本元素会随着图表的其余部分继续缩放。

可通过以下方式完成响应：

.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 600 300')
.attr('preserveAspectRatio','xMinYMin')

图表的jsfiddle在这里：https://jsfiddle.net/w4x97nv0/1/

在缩放其他svg元素时，固定文本字体大小的最佳方法是什么？

Answer 1

您的问题有点奇怪：字体大小实际上始终是恒定的10px。自从您设置了SVG viewBox以来，发生的事情是SVG正在扩展到其容器。

因此，通过要求保持字体大小不变，在我看来，您实际上是在询问如何更改！我的意思是，不管SVG的大小如何，都对其进行更改以使其在屏幕上保持相同的外观大小。

如果正确，则可以在"resize"侦听器中执行简单的数学运算。像这样：

d3.select(window).on("resize", function() {
    const newWidth = d3.select("svg").style("width");
    const newFontSize = 10 * (600 / parseInt(newWidth));
    d3.selectAll(".tick").select("text")
        .style("font-size", newFontSize)
});

如您所见，我们获得了SVG的新宽度，并使用600作为原始宽度，我们计算了新的字体大小。从视觉上来讲，这不是一个很好的效果，而且我不确定您为什么要这么做。

这是您的JSFiddle进行的更改：https://jsfiddle.net/2vk1dqtz/

如何在响应式SVG中保持文本大小？

1 个答案: