javascript - 带有百分比坐标的响应轴

Question

在尝试使用 d3.js 构建响应式散点图时，我在 100% x 100% svg 元素中使用基于 % 的坐标。

如何 .call(axis) 并让它使用 % 而不是 px 值来布局轴，以便它们始终适合 svg 和绘制的数据吗？

在这种情况下我需要手动绘制轴吗？如果是这样，我如何获得每个轴的常规刻度值？

<svg width="100%" height="100%">
    <g class='data'>
        <circle cx='1%' cy='2%' />
        <circle cx='3%' cy='12%' />
        <circle cx='10%' cy='24%' />
    </g>
    <g class='axis'>
        <!-- is there a way to generate the axis ticks with x=% y=% ? -->
    </g>
</svg>

Answer 1

这对于 D3 来说是不可能的。轴组件将生成一个与关联范围相对应的轴，即要使其成为任何特定尺寸，您必须修改关联比例的输出范围。例如，您可以通过计算相对于窗口大小的范围大小并在变化时更新轴，以响应方式轻松地完成此操作

xScale.range([0, window.innerWidth]);