Angular 使用D3显示角度分量内的SVG图像

我正在努力使用D3在我的角度组件中显示一个简单的SVG图像。我确信我只是看不见树木，我错过了一些明显的东西

我已经安装了D3，它列在我的

包.json

文件中：

“D3”：“5.1.0”

。我创建了一个角度组件来显示svg，并将d3导入：

import*作为“d3”中的d3

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

我没有看到svg文件显示。也许我把svg文件放错地方了。因为我还没有前面的路径，所以当前它位于我的
ClientApp
文件夹中，包含我的
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);
};
};

svg不显示的任何建议都非常受欢迎。
的签名从D3 v4到v5。它已从现在已弃用的模块d3请求移动到新模块。从v5开始，D3使用了有利于较旧的
XMLHttpRequest
，并反过来采用了来处理这些异步请求

d3.xml（）
的第二个参数不再是处理请求的回调，而是一个可选对象
d3.xml（）
现在将返回您可以在其方法中处理的承诺

因此，您的代码变为：

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