d3 v5 轴过渡答案

【问题标题】：d3 v5 axis transitiond3 v5 轴过渡
【发布时间】：2018-10-19 10:08:17
【问题描述】：

我在 d3 v5 中有一个图表，它一次显示部分数据集并在按下按钮时更新它。图形内容（线、多边形、圆形、图像和文本）过渡很好，但我不知道如何在 d3 v5 中过渡轴。

我已尝试按照本教程进行操作： https://bl.ocks.org/HarryStevens/678935d06d4601c25cb141bacd4068ce

遗憾的是，它使用 d3 v4。我尝试在我的项目中使用该语法，但似乎无法在 d3 v5 中对转换使用调用。

问题出在这部分：

svg.select(".x")
  .transition()
    .call(x_axis);

我收到此错误：

error TS2345: Argument of type 'Axis<number | { valueOf(): number; }>' is not assignable to parameter of type '(transition: Transition<BaseType, { x: Date; y: number; doubt: number; }[][], HTMLElement, any>, ...'.
Types of parameters 'context' and 'transition' are incompatible.

有点意思，基本上是说axisBottom函数应该应用于选择而不是过渡。

我环顾四周，但我发现的所有东西要么使用 d3 v4，要么没有提到轴转换。那么：是否可以在 d3 v5 中转换轴，如果可以，如何转换？

【问题讨论】：

你能发一个Minimal, Complete, and Verifiable example吗？ .会更容易帮助你。
从错误看来，您的问题不是 d3 v4 到 d3 v5，而是 d3 JavaScript 到 d3 TypeScript。您应该添加一个typescript 标签...
@Mark：你说得对，我完全忽略了这种可能性。我已经研究过了，似乎我只需要在调用它时将它绑定到轴函数。我会回答这个问题并尝试拓宽我对未来问题的看法。

标签： javascript typescript d3.js

【解决方案1】：

感谢@Mark，我意识到我从错误的角度看待问题。它不是来自 d3，而是来自 Typescript。 axisBottom 变量是一个函数，Typescript 要求它在用作回调时具有上下文。绑定 this 解决了这个问题，如下所示：

svg.select(".x")
  .transition()
    .call(x_axis.bind(this));

【讨论】：