d3.js v5.9.1 - 此版本中的某些方法未按预期工作

Question

我在 Angular 7.1.4 项目中使用 d3.js。我使用的 d3 版本是 5.9.1，这是目前为止的最新版本。

我使用 npm 安装了它，如下所示：

npm install d3

放在"d3": "^5.9.1"我的package.json文件中。

我还@types/d3使用命令通过 npm安装npm install @types/d3，并将其放入"@types/d3": "^5.7.1"我的package.json文件中。

有了@types/d3依赖项，我将 d3 导入到我的打字稿文件中，如下所示：

import * as d3 from "d3";，就像d3 github 指南所说的那样。

现在，我正在关注此网站上使用 d3 创建条形图的示例。

这个例子的完整的源代码被发现在这里上的jsfiddle，如果你看看他们的声明<script>标签，你会看到，他们使用的是D3版本5.9.1，这是我使用相同的版本：

<script src="https://d3js.org/d3.v5.min.js"></script>

// https://d3js.org v5.9.1 Copyright 2019 Mike Bostock

但是，当我将以下代码复制到我的打字稿文件中时：

  const yScale = d3.scaleLinear()
  .range([height, 0])
  .domain([0, 100]);

  const makeYLines = () => d3.axisLeft()
  .scale(yScale)

我在d3.axisLeft()方法调用时遇到错误，错误说：

Expected 1 arguments, but got 0.

但是，jsfiddle 上的示例使用与我拥有的完全相同的版本（5.9.1）并且没有遇到任何问题。

有人可以解释问题是什么吗？

编辑：

我刚刚检查了缩小的 js 文件和原始 js 文件https://d3js.org/d3.v5.js，该axisLeft方法实际上确实采用了一个参数：

function axisLeft(scale) { return axis(left, scale); }

那么 jsfiddle 示例如何在不向其传递参数的情况下调用该方法呢？

Answer 1

好吧，如果您进一步查看d3源代码，它要您传递的参数是scale：

function axis(orient, scale) {
  var tickArguments = [],
  ...

如果你不通过它，比例将作为undefined进入。

但 axis是一个闭合的是提供另一种提供一种scale与.scale“方法”。

axis.scale = function(_) {
  return arguments.length ? (scale = _, axis) : scale;
};

您的下一段代码正在使用该“方法”传递比例。

现在使用 TypeScript 需要做出某些让步，因为它不像 JavaScript 那样松散。所以打字作者选择遵循轴函数签名。综上所述，您的 TypeScript 应该遵循该示例，并且是：

const makeYLines = () => d3.axisLeft(yScale);