引导选项卡内的 D3 图表

Question

我正在尝试使用 angular 4 实现 d3 图表，一切正常，现在我正在尝试将 svg 元素放在引导选项卡中，但出现此错误。

错误错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“nativeElement”

HTML代码

<ul class="nav nav-tabs profile-tab" role="tablist">
    <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#profile" role="tab">Profile</a> </li>                            
</ul>

<div class="tab-content">   
    <div class="tab-pane active" id="profile" role="tabpanel">
       <div class="card-block">
            <svg width="560" height="400"></svg> 
       </div>
    </div>
</div>

导致问题的角度代码行

我的组件代码

import { Component, OnInit, OnDestroy,AfterViewInit, ViewChild , ElementRef} from '@angular/core';

import * as d3 from 'd3';

@Component({
selector: 'jhi-pathway-detail',
templateUrl: './pathway-detail.component.html'
 })
 export class PathwayDetailComponent implements OnInit, OnDestroy, 
    AfterViewInit {


@ViewChild('svg') svgElement: ElementRef;

 svg= this.svgElement.nativeElement;
 color;
 simulation;
 link;
 node;

constructor( 
) {
}

ngOnInit() {

   }

ngAfterViewInit(){
  this.svg = d3.select("svg");

  let width = this.svg.attr("width");
  let height =this.svg.attr("height");


  this.color = d3.scaleOrdinal(d3.schemeCategory20);

  this.simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

   this.render(this.grapgData);
  }


ticked() {
  this.link
     .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

this.node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
}

render(graph){
 this.link = this.svg.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

 this.node = this.svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 5)
  .attr("fill", (d)=> { return this.color(d.group); })
  .call(d3.drag()
      .on("start", (d)=>{return this.dragstarted(d)})
      .on("drag", (d)=>{return this.dragged(d)})
      .on("end", (d)=>{return this.dragended(d)}));

 this.node.append("title")
  .text(function(d) { return d.id; });

 this.simulation
  .nodes(graph.nodes)
  .on("tick", ()=>{return this.ticked()});

 this.simulation.force("link")
  .links(graph.links);  
}

 dragged(d) {
   d.fx = d3.event.x;
   d.fy = d3.event.y;
 }

 dragended(d) {
  if (!d3.event.active) this.simulation.alphaTarget(0);
   d.fx = null;
   d.fy = null;
 }

 dragstarted(d) {
   if (!d3.event.active) this.simulation.alphaTarget(0.3).restart();
     d.fx = d.x;
     d.fy = d.y;
  }

  }

Answer 1

您需要使用 ElementRef 来直接引用 dom 元素。在您的模板中，执行以下操作：

<svg width="560" height="400" #svg></svg> 

在你的类中，创建一个实例变量：

import { ..., ViewChild, ElementRef } from '@angular/core';    

...

@ViewChild('svg') svgElement: ElementRef;

...

drawSvg() {
  let svg = this.svgElement.nativeElement;
  let width = svg.attr("width");
  let height = svg.attr("height");
  ...
}