如何在 d3 scaleOrdinal 中处理缩放和平移答案

【问题标题】：How to handle zoom and pan in d3 scaleOrdinal如何在 d3 scaleOrdinal 中处理缩放和平移
【发布时间】：2022-09-29 15:01:16
【问题描述】：

我必须为每个日期创建一个具有可变宽度 x 轴的自定义股票图表。我正在使用 d3.scaleOrdinal 创建 x 轴

const xScale = d3.scaleOrdinal()
    .domain([\"16-09-2022\", \"17-09-2022\", \"18-09-2022\", \"19-09-2022\", \"20-09-2022\"])
    .range([0, 260, 500, 750, 900,1010]);

在使用几何方法进行缩放时，轴被缩放为一个整体（即刻度、刻度标签、轴线），我想像 scaleLinear 一样工作。

svg.select(\"#xaxis\")
.attr(\"transform\", `translate(${transform.x},${margin.top})scale(${transform.k}) `)

任何人都可以建议如何使用 d3 v7 达到预期的结果提前致谢

标签： d3.js

【解决方案1】：

您需要使用连续刻度，例如scaleLinear，否则它将不起作用，因为序数刻度无法在值之间进行插值。

可以把它想象成有一个索引为 0、1、2 的数组。没有索引 0.5 或 1.5，因为序数是离散的整数值。

【讨论】：