具有百分比坐标的响应轴

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]);