Javascript Renderer2在使用D3JS-4时不渲染SVG元素

经过下面的链接

我明白我们不应该直接操纵DOM。所以我开始探索使用角度4的渲染器2

因此，我开始编写一些代码来向DOM添加svg。下面是我的代码片段

HTML代码

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

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

我确实提到了以下问题

但是到目前为止我还没有找到正确的答案

下面是问题的屏幕截图

如上所示，svg存在于DOM中，但它不显示在web页面中。

---

任何帮助都将不胜感激。

您已正确地将具有高度和宽度的svg元素添加到视图中。但是svg元素没有

背景色

属性。你可以把它想象成画布，在画布上你可以将其他具有形状和颜色的元素分层

您需要在此视图中添加另一个元素才能看到任何内容。从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');
  }
}

@组件({
选择器：“条形图”，
模板：`
`
})
导出类BarChartComponent实现OnInit{
@ViewChild（'条形图'）
公共图表：ElementRef；
公共svg：任何；
专用宽度：数字=600；
私人高度：数字=400；
恩戈尼尼特（）{
this.svg=d3.select（this.chart.nativeElement）
.append（'svg'）
.attr（'width'，this.width）
.attr（'height'，this.height）；
这个是.svg
.append（'rect'）
.attr（'x'，0）
.attr（'y'，0）
.attr（'width'，this.width）
.attr（'height'，this.height）
.attr（“填充”、“蓝色”）；
}
}

此.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)

---

感谢您努力回答这个问题，是的，我已经看到SVG元素具有背景色样式属性的示例。我还忘了提到，我确实通过您发布的替代方法实现了SVG的显示。但是如果您遵循我在问题中描述的第一个链接，他们建议使用渲染器，而不是直接将SVG绑定到DOM@SrinivasValekar有一些svg元素具有背景颜色样式的示例，但我不认为这是一个好的实践，因为它不是由浏览器普遍实现的。@SrinivasValekar我阅读了链接，但我的论点是在某个阶段，您必须使用d3与DOM交互。与使用d3将svg添加到由

nativeElement

公开的DOM中相比，使用Renderer2添加初始svg元素，然后使用d3与DOM交互，我看不到任何优势。实际上，您不需要d3与DOM交互，这一点您已经做到了。其想法是使用d3进行数学运算，使用angular进行渲染和交互。

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