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

Question

通过以下链接后

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元素！。

我确实参考了以下问题

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

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

以下是问题的屏幕截图

如上所示，svg存在于DOM中，但它不会显示在网页中。 任何帮助将不胜感激。

Answer 1

<div class="wrapper row2"> <nav id="mainav" class="hoc clear"> <ul class="clear"> <li class="active"><a href="index.html">Home</a></li> <li><a class="drop" href="#">Search properties</a> <ul> <li><a href="search.html">Search properties</a></li> <li><a href="tips.html">Tips for parents</a></li> </ul> </li> <li><a class="drop" href="#">Owners</a> <ul> <li><a href="register.html">Register & FAQ</a></li> <li><a href="login.html">Login</a></li> </ul> </li> <li><a href="blog.html">Blog</a></li> <li><a href="about.html">About us</a></li> </ul> </nav> </div>创建HTML元素而不是SVGElement，因为Angular不知道你想要svg：svg。

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

this.renderer.createElement('svg', 'svg')

Answer 2

您已正确地向视图添加了高度和宽度的svg元素。但是svg元素没有background-color属性。您可以将其视为画布，在其上方对其他具有形状和颜色的元素进行分层。

您需要在此视图中添加另一个元素才能看到任何内容。从svg中删除background-color属性，然后，当您将svg元素添加到视图中时，可以使用d3为视图添加一个rect：

d3.select(this.svg)
  .append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', 600)
  .attr('height', 400)
  .attr('fill', 'blue');

或者，您可以执行以下操作：

@Component({
  selector: 'bar-chart',
  template: `
    <div class='bar-chart' #barChart></div>
  `
})
export class BarChartComponent implements OnInit {

  @ViewChild('barChart')
  public chart: ElementRef;

  public svg: any;

  private width: number = 600;
  private height: number = 400;

  ngOnInit() {
    this.svg = d3.select(this.chart.nativeElement)
      .append('svg')
      .attr('width', this.width)
      .attr('height', this.height);

    this.svg
      .append('rect')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', this.width)
      .attr('height', this.height)
      .attr('fill', 'blue');
  }
}