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

Posted 2023-02-22

【中文标题】Renderer2 在使用 d3 js - Angular 4 时不渲染 SVG 元素

【英文标题】：Renderer2 does not render SVG element while using d3 js - Angular 4

【发布时间】：2018-05-08 20:06:41

【问题描述】：

通过以下链接后

Using D3.js with Angular 2

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

所以我开始编写一些代码来将 svg 添加到 DOM。以下是我的代码的 sn-ps。

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 中，但它不显示在网页中。 任何帮助将不胜感激。

【参考方案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)

【参考方案2】：

您已正确地将具有高度和宽度的 svg 元素添加到视图中。但是 svg 元素没有 background-color 属性。您可以将其视为画布，您可以在上面叠加其他具有形状和颜色的元素。

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

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');
  

【讨论】：

感谢您为回答这个问题所做的努力，是的，我已经看到了 SVG 元素具有背景颜色样式属性的示例。另外我忘了提到我确实通过您发布的替代方法实现了显示 SVG。但是，如果您按照我在问题中描述的第一个链接，他们建议使用渲染器而不是直接将 SVG 绑定到 DOM

@SrinivasValekar 有一些带有背景颜色样式的 svg 元素的示例，但我认为这不是一个好习惯，因为浏览器并未普遍实现它。

@SrinivasValekar 我阅读了链接，但我的论点是在某些阶段您必须使用 d3 与 DOM 交互。我看不出使用 Renderer2 添加初始 svg 元素，然后使用 d3 与 DOM 交互，而不是使用 d3 将 svg 添加到由nativeElement 公开的 DOM 有任何优势。

你实际上不需要 d3 来与 DOM 交互，你已经有了 Angular。我们的想法是使用 d3 进行数学运算，使用 angular 进行渲染和按预期进行交互。