title: The barchart is not being displayed in the local server site?
body: <p>I am using angular typescript with d3.js. I created a bar chart but it is not being displayed and unsure why. I made private classes and implemented them into the ngOnInit() class but when I live server it. there is nothing and it is blank. On the terminal it showing no problems but im not sure why its not being displayed. Fairly new to angular/typescript and d3.js. Here is my code:</p>
  <pre><code>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(&quot;width&quot;, this.height + (this.margin * 2) )
    .attr(&quot;height&quot;, this.height + (this.margin * 2))
    .append('g')
    .attr('transform', 'translate(' + this.margin + &quot;,&quot; + this.margin + ')');
  }
  
  //x axis band scale
  
  private drawBars(dataSet: any[]): void{
  const xAxis = d3.scaleBand()
    .range([0, this.width])
    .domain(dataSet.map(d =&gt; d.Framework))
    .padding(0.2);
  
  // drawing the x-axis 
    this.svg.append('g')
     .attr(&quot;transform&quot;, &quot;translate(0,&quot; + this.height + &quot;)&quot;)
     .call(d3.axisBottom(xAxis))
     .selectAll(&quot;text&quot;)
     .attr(&quot;tranform&quot; ,&quot;translate(-10,0)rotate(-45)&quot;)
     .style(&quot;text-anchor&quot;, &quot;end&quot;);
  
     const yAxis= d3.scaleLinear()
     .domain([0, 100])
     .range([this.height, 0]);
  
     this.svg.append(&quot;g&quot;)
     .call(d3.axisLeft(yAxis));
  
     //creation of bar graph and fill in the bars
  
  
     this.svg.selectAll(&quot;bars&quot;)
     .data(dataSet)
     .enter()
     .append(&quot;rect&quot;)
     .attr(&quot;x&quot;, d =&gt; xAxis(d.Framework))
     .attr(&quot;y&quot;, d =&gt; yAxis(d.Stars))
     .attr(&quot;width&quot;, xAxis.bandwidth())
     .attr(&quot;height&quot;, (d) =&gt; this.height - yAxis(d.Stars))
     .attr(&quot;fill&quot;, &quot;#d04a35&quot;);
  }
  
  
  
  
  
   constructor() { }
  
  ngOnInit(): void {
  this.createSvg();
  this.drawBars(this.dataSet);
  
  }
  </code></pre>