此问题已存在：

The barchart is not being displayed in the local server site?
三个月前关门了。
我在d3.js中使用了Angular TypeScript。我创建了一个条形图，但它没有显示出来，不知道为什么。我创建了私有类并将它们实现到ngOnInit()类中，但当我在服务器上运行它时，没有任何内容，并且是空白的。在终端上，它没有显示任何问题，但我不确定为什么它没有显示。我不确定是否必须将其调用到bar-char. component中。html。我创建了一个小数据集，只是为了看看条形图是否可以可视化。这是Angular/TypeScript和d3.js的新手。下面是我的代码：

export class BarChartComponent implements OnInit 
 {
  private svg:any;
  private dataSet = [10,20,30,32,47,50,76];

  private margin = 50; 
  private height = 100 - (this.margin * 2); 
  private width = 200 - (this.margin * 2); 

  public createSvg(): void{
   var svg = d3.select('barchart')
  .append('svg')
  .attr("width", this.height + (this.margin * 2) 
 )
  .attr("height", this.height + (this.margin * 
   2))
  .append('g')
  .attr('transform', 'translate(' + this.margin 
   + "," + this.margin + ')');

  d3.select('barchart');
  }

 //x axis band scale

 private drawBars(dataSet: any[]): void{

   const xAxis = d3.scaleBand()
  .range([0, this.width])
  .domain(dataSet.map(d => d.Framework))
  .padding(0.2);

// drawing the x-axis 
  this.svg.append('g')
   .attr("transform", "translate(0," + 
    this.height + ")")
   .call(d3.axisBottom(xAxis))
   .selectAll("text")
   .attr("tranform" 
   ,"translate(-10,0)rotate(-45)")
   .style("text-anchor", "end");

   const yAxis= d3.scaleLinear()
   .domain([0, 100])
   .range([this.height, 0]);

   this.svg.append("g")
   .call(d3.axisLeft(yAxis));

   //creation of bar graph and fill in the bars

   this.svg.selectAll("bars")
   .data(dataSet)
   .enter()
   .append("rect")
   //.attr("x", d => xAxis(d.Framework))
   //.attr("y", d => yAxis(d.Stars))
   .attr("width", xAxis.bandwidth())
   //.attr("height", (d) => this.height - 
    yAxis(d.Stars))
   .attr("fill", "#d04a35");
}

 constructor() { }

 ngOnInit(): void {
 this.createSvg();
 this.drawBars(this.dataSet);

}

在我运行服务器后，我在控制台上得到一个错误，关于它没有阅读append属性。下面是错误消息的图片：ERROR TypeError: cannot read properties of undefined(reading 'append')
有什么好的提示，让未来不会重复同样的错误？我对使用这些技术非常陌生。