升级到 v5 后 d3.xml 损坏

Question

我有一段在 d3 v4 上运行的代码，但在升级到 v5 后被破坏，它因错误而失败TypeError: __WEBPACK_IMPORTED_MODULE_0_d3__.G(...).mimeType is not a function编码：Object.keys(Constants.images).forEach(imageName => {  console.log(imageName, Constants.images[imageName])  d3    .xml(Constants.images[imageName])    .mimeType('image/svg+xml')    .get((error, xml) => {      if (error) throw error;      let svgElement = xml.documentElement;      svgElement.id = `def-${imageName}`;      this.defs.node().appendChild(svgElement);    });  this.defs.selectAll('svg').attr('preserveAspectRatio', 'none');});Constants.images[imageName] 包含一个指向 svg 的 url错误似乎与该行有关，.xml(Constants.images[imageName])因为注释掉 mimetypes 行会导致它移动到 .get 行。从 v4 升级到 v5 后可能导致此失败的原因是什么？

Answer 1

听起来您正在使用d3-request模块，该模块已被v5 中的d3-fetch取代。

d3-fetch 基本上充当 Fetch API 的包装器。它在Fetch API之上提供对 D3 的解析。Fetch API 用于代替旧的XMLHttpRequest（在 d3-request 中使用），并使用Promises 来处理异步请求。

由于 D3 现在使用 d3-fetch，因此d3.xmlv5 中的签名已更改。

从文档：

d3.xml(input[,init]): 以文本形式获取指定输入 URL 处的文件，然后将其解析为 XML。如果指定了 init，则将其传递给底层的 fetch 调用；有关允许的字段，请参阅 RequestInit。

因此，如果您必须指定 MIME 类型，则可以将其指定为init. 就像是：

d3.xml(Constants.images[imageName], {

  headers: [

    ["Content-Type", "image/svg+xml"],

  ]

})