Question

我要在角度5内构建一系列d3图。我一次用相同的d3多次绘制相同的d3图，因此我为id分配了一个变量。问题是，在'd3.select（）'寻找ID的同时分配了ID，因此尚未分配ID，并且出现错误无法读取null的属性'getAttribute'

如何从用于绘图的同一数据中为预期的“ svg”的“ id”分配一个变量？现在，所有这些都在我组件的“ onInit”函数中。

在我的降水.component.ts中：

this.input_id += this.data.id

var svg = d3.select("#"+this.input_id)

我的html看起来像：

<svg width="180" height="100"[attr.id]="input_id" > </svg>

整个降水分量.ts供参考：

import { Component, OnInit, Input } from '@angular/core';
import { DataService } from '../data.service';
import { Http } from '@angular/http';
import * as d3 from 'd3';

@Component({
 selector: 'app-precipitation',
 templateUrl: './precipitation.component.html',
 styleUrls: ['./precipitation.component.css']
})

export class PrecipitationComponent implements OnInit {
  @Input() site1;

constructor(private _dataService: DataService, private http: Http) { }

date: Date;
dates: any;
value: Number;
eachobj: any;
data: any;
values: any;
average: any;
myClasses: any;
name: any;
input_id;

ngOnInit() {
  this.name = this.site1.name;

  var parse = d3.timeParse("%Y-%m-%d")
  this.data = this.site1
  this.input_id = ""
  this.input_id += "precipitation"
  this.input_id += this.data.id

  this.dates = Object.keys(this.data.historical_data)

  this.values = Object.values(this.data.historical_data)
  this.values.forEach((obj, i) => obj.date = this.dates[i]);

  this.data = this.values

  var svg = d3.select("#"+this.input_id)


  // svg = svg.select("." + this.name)
  var margin = { top: 20, right: 20, bottom: 30, left: 0 },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  barPadding = 5,
  barWidth = (width / this.data.length);
  var last = this.data[0].date
   var first = this.data[(this.data.length) - 1].date


  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var x = d3.scaleBand().rangeRound([0, width]).padding(0.1)
   .domain(this.data.map(function (d) { return d['date']; }));
  var y = d3.scaleLinear().rangeRound([height, 0])
   .domain(<[Date, Date]>d3.extent(this.data, function (d) { return d['precipitation']; }));

  g.selectAll(".bar")
  .data(this.data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function (d) { return x(d['date']); })
  .attr("y", function (d) { return y(d['precipitation']); })
  .attr("width", barWidth - barPadding)
  .attr("height", function (d) { return height - y(d['precipitation']); });

  var line = d3.line()
  .x(function (d) { return x(d['date']); })
  .y(function (d) { return y(d['precipitation']); });

  svg.append('g')
  .attr("class", "axis--x")
  .append("text")
  .attr("fill", "#000")
  .attr("x", (width / 2) - 80)
  .attr("y", height + 40)
  .text(first)
  .style("font-size", "09")
  .style("font-family", "Roboto")
  .style('fill', '#5a5a5a');
  svg.append('g')
  .attr("class", "axis--x")
  .append("text")
  .attr("fill", "#000")
  .attr("x", (width / 2) + 45)
  .attr("y", height + 40)
  .text(last)
  .style("font-size", "09")
  .style("font-family", "Roboto")
  .style('fill', '#5a5a5a');

  svg.append("path")
  .data(this.data)
  .attr("class", "line")
  .attr("d", line);
 }


}

通过父组件接收数据的方式：

<app-precipitation [site1]="site"></app-precipitation>

无法读取null的属性'getAttribute'：Angular和d3.select

0 个答案: