如何制作自适应容器且文字不拉伸的D3 SVG图表？

我需要在网页中心放置D3生成的图表，要求它能自适应容器空间，但目前无法阻止点和轴标签的文字被拉伸。已尝试用SVG属性vector-effect="non-scaling-stroke"处理图表线条，效果良好，但文字仍会随图表整体宽高比变形——图表过宽时文字横向拉伸变宽，过高时纵向拉伸变高。

我不想在容器尺寸变化时重绘整个图表，因为重绘会导致闪烁且占用大量CPU（虽预计不会有人频繁调整尺寸）。同时要求图表完全填充容器空间，不能仅保持宽高比——后者虽能让文字形态正确，但会让图表整体缩放，无法填满容器。

问题示例 #

• 超宽图表：文字被横向拉伸，形态失真
• 超高图表：文字被纵向拉伸，形态失真

精简版SVG代码 #

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path class="gridded-line" fill="none" stroke="steelblue" stroke-width="1" d="M0,23.58L15.278,12.217L35.417,59.194L100,20.281"/>
  <rect width="20" height="5" fill="none" transform="translate(35, 40)" style="stroke: rgb(71, 85, 210); stroke-width: 0.5; opacity: 1;"/>
  <text class="tooltip-text" fill="#4755D2" transform="translate(35, 40)" style="font-size: 2px; opacity: 1;">
    <tspan x="2" y="1.1em">292.93</tspan>
    <tspan x="2" y="2.1em">Thu Feb 01 2024</tspan>
  </text>
</svg>

可行解决方案 #

方法1：将文字剥离为HTML元素 #

把轴标签、tooltip等文字内容从SVG中移出，改用HTML元素实现，通过CSS绝对定位对应到图表位置：

• 移除SVG内的<text>、<tspan>等文字节点
• 在图表容器内添加HTML元素（如<div>/<span>），设置position: absolute
• 用D3计算文字应放置的坐标，动态更新HTML元素的left/top样式
• 给HTML元素设置更高层级，避免被SVG遮挡

方法2：SVG内逆缩放文字 #

针对SVG中的文字元素，添加反向缩放的transform抵消整体拉伸：

• 监听容器尺寸变化，计算当前SVG的缩放比例（容器宽/ viewBox宽、容器高/ viewBox高）
• 给每个文字元素应用transform: scale(1/横向缩放比, 1/纵向缩放比)，同时调整坐标补偿缩放后的偏移
• 保留vector-effect="non-scaling-stroke"保证线条正常，仅通过逆缩放让文字保持原形态
• 优势：无需剥离文字到HTML，仅更新transform属性，性能开销远低于重绘整个图表

方法3：宽高比适配+容器裁剪 #

若允许边缘裁剪部分图表，可设置SVG的preserveAspectRatio="xMidYMid meet"（保持宽高比居中），给容器添加overflow: hidden让图表填满容器。此方法适合对图表完整性要求不高的场景。

内容的提问来源于stack exchange，提问作者Craig