使用d3 js时Renderer2不会渲染SVG元素-Angular 4

通过以下链接后

Using D3.js with Angular 2

我知道我们不应该直接操纵DOM.因此,我开始探索使用角度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元素！.

我确实提到了以下问题

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

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

下面是问题的屏幕截图

如上所示,svg存在于DOM中,但未显示在网页中.
任何帮助将非常感激.

解决方法:

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)