Question

我正在努力使用D3在我的Angular组件中显示一个简单的SVG图像。我敢肯定，我看不到木头的树木，而且遗漏了一些明显的东西。

我已安装了"d3": "5.1.0"文件中列出的D3：import * as d3 from "d3";。我创建了一个Angular Component来显示svg并导入d3：createMap。

我编写了一个svg方法，我希望将一个名为testCardGroup的父元素附加到Angular组件，然后将名为testCardGroup的子组元素附加到该元素。最后，我想导入我的svg文件并将其附加到ClientApp元素。

我没有看到显示的svg文件。也许我已将svg文件放在错误的位置。由于我还没有前面的路径，目前它位于我的package.json文件夹中，包含tsconfig,json和createMap() { // Append an svg object to the base element. this.svg = d3.select(this.element) .append("svg") .attr("class", "svg") .attr("width", this.svgWidth) .attr("height", this.svgHeight); // Append a new group to the svg. this.testCardGroup = this.svg .append("g") .attr("id", "testCardGroup") .attr("width", this.svgWidth) .attr("height", this.svgHeight); //Import the TestCard artwork and append to testCardGroup. d3.xml("TestCard.svg"), function (error, xml) { if (error) throw error; this.testCardGroup.appendChild(xml.documentElement); }; };个文件。这是我的代码：

removeClass('fa fa-toggle-off fa-lg');

为什么svg不显示非常受欢迎的任何建议。

Answer 1

d3.xml的签名从D3 v4到v5有changed。它已从现已弃用的模块d3-request移至新的d3-fetch模块。从v5开始，D3使用Fetch API支持较旧的XMLHttpRequest，并反过来采用Promises来处理这些异步请求。

d3.xml()的第二个参数不再是处理请求的回调，而是一个可选的RequestInit对象。 d3.xml()现在将返回您可以使用.then()方法处理的Promise。

您的代码因此变为：

d3.xml("TestCard.svg")
  .then(xml => {
    this.testCardGroup.appendChild(xml.documentElement);
  });

使用D3在Angular Component中显示SVG图像

1 个答案: