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的网址

错误似乎与.xml(Constants.images[imageName])行有关，因为注释掉mimetypes行会导致其移至.get行。从v4升级到v5后，这可能导致失败吗？

Answer 1

解决方案是删除.mimetype并将.get转换为新语法

Object.keys(Constants.images).forEach(imageName => {
  d3
    .xml(Constants.images[imageName])
    .then((xml) => {
      let svgElement = xml.documentElement;
      svgElement.id = `def-${imageName}`;
      this.defs.node().appendChild(svgElement);
    });

  this.defs.selectAll('svg').attr('preserveAspectRatio', 'none');
});

Answer 2

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

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

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

从文档中：

d3.xml(input[,init])：以指定的输入URL获取文件，格式为文本，然后将其解析为XML。如果指定了init，则将其传递以及底层的获取请求；请参阅RequestInit以获取允许字段。

因此，如果必须指定MIME类型，则可以将其指定为init中的标头。像这样：

d3.xml(Constants.images[imageName], {
  headers: [
    ["Content-Type", "image/svg+xml"],
  ]
})

升级到v5后d3.xml损坏

2 个答案: