升级到 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"],  ]})