javascript - Renderer2 在使用 d3 js 时不呈现 SVG 元素 - Angular 4

Question

通过以下链接后

Using D3.js with Angular 2

我明白我们不应该直接操作 DOM。于是我开始探索使用angular 4的Renderer2。

所以我开始编写一些代码来将 svg 添加到 DOM 中。以下是我的代码片段。

HTML代码

<div class="row">
 <div class="col-12">
   <div #myBarGraph id="host"></div>
 </div>
</div>

Component.ts

export class BarGraphComponent implements OnInit {
 host:any;
 svg:any;
 @ViewChild('myBarGraph') myBarGraph:ElementRef;

 constructor(private renderer:Renderer2) { }

 ngOnInit() {
  //some logic
 }

 // called on some drop down selection
 teamSelection(){
  //some logic
   this.host = this.mybarGraph.nativeElement;
   buildSVG();
 }

 buildSVG():void {
   this.svg = this.renderer.createElement('svg');
   this.renderer.setAttribute(this.svg,'width','600');
   this.renderer.setAttribute(this.svg,'height','400');
   this.renderer.setAttribute(this.svg,'background-color','blue');
   this.renderer.appendChild(this.host,this.svg); 
 }
}

上面的代码能够将 svg 元素添加到 DOM 中。但令我惊讶的是，它实际上没有显示 svg 元素!

我确实引用了以下问题

1. Angular2 Renderer: Svg rect is rendered but not showing in page
2. Angular2 does not render SVG in runtime

但到目前为止我找不到合适的答案。

下面是问题截图

正如你在上面看到的，svg存在于DOM中，但它没有显示在网页中。任何帮助将不胜感激。

Answer 1

this.renderer.createElement('svg') 创建 HTML 元素而不是 SVGElement 因为 Angular 不知道你想要 svg:svg。

尝试使用 this.renderer.createElement('svg', 'svg')，其中第二个参数是命名空间。每个 svg 元素都必须以相同的方式创建，例如:

let rect = this.renderer.createElement('rect', 'svg')
this.renderer.appendChild(svg, rect)