为什么这个svg和数组在角度上多次启动？

Question

component.ts

import { Component, style } from "@angular/core";
import { DataService } from '../data.service';
import d3 = require("d3-3");
import { Data } from "../data";

@Component({
  selector: 'ts-graph',
  templateUrl: './time-seriesG.component.html',
  styles: [`
    .graph: {padding-left: 20px !important; }
  `]
})
export class timeSeriesComponent {
  sym: string[] = [];
  price: any[] = [];
  tStamp: any[] = [];
  data: any[]=[];
  arr: any;

  constructor(private dataService: DataService) { }

  getData() {
    let i: number;
    this.dataService.getData()
      .subscribe(data => {
    for(i=0;i<Object.keys(data).length;i++){
      this.data.push(data[i])
    }
      });
  }

  logV() {
    this.arr = this.data.map((d,i) => ({
      //time: d.time, 
      //sym: d.sym,
      price: d.price, 
      index: i 
    }))

    this.arr = this.arr.slice(0,25)
    console.log(this.arr.slice(0,25))
  }

  lineGraph() {
    var h=400; 
    var w=350; 
    var lineFun = d3.svg.line()
                    .x(function(d){return d.index*5})
                    .y(function(d){return d.price})
                    .interpolate('linear');

    var svg = d3.select('div')
                .append('svg')
                .attr('id','LineGraph')
                .attr('width',w)
                .attr('height',h);

    var viz = svg.append('path')
                 .attr('d',lineFun(this.arr))
                 .attr('stroke','white')
                 .attr('stroke-width',2)
                 .attr('fill','none');

  }

  ngOnInit() {
    this.getData();
  }

}

component.html

<h2>Time Series Graph</h2>
<div>{{logV()}}</div>
<div>{{lineGraph()}}</div>

我试图从服务中获取一些数据的简单线条图。由于某种原因，svg组件被多次创建。

​

​

另外，我的一个数组似乎也被多次启动。

​

​

我真的很感激任何建议，但请记住，我没有太多的经验使用角度。

数组格式：

​

Answer 1

您从这里的视图调用lineGraph，<div>{{lineGraph()}}</div>。因此，每次触发转换检测时，都会调用该函数，从而产生许多、许多、多个附加的svgs。

只需在收到数据后调用一次，您就只能得到一个svg。