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。

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

1 个答案: