具有百分比坐标的响应轴

Responsive axis with percentage coordinates

本文关键字：响应 坐标 百分比      更新时间：2023-09-26

为了尝试使用 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>

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

xScale.range([0, window.innerWidth]);
相关文章：