D3.xml升级到 v5 后损坏

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

解决方案是删除 .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的包装器。它在获取 API 之上提供 D3 解析。Fetch API 用于代替旧XMLHttpRequest(用于 d3-request(，并使用Promise来处理异步请求。

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

从文档中：

d3.xml(input[,init])：在指定的输入 URL 处获取文件 文本，然后将其解析为 XML。如果指定了 init，则传递 以及要获取的基础调用;请参阅请求初始化允许 领域。

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

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