title: Angular D3 not displaying line chart
body: <p>Hi I'm trying to create line chart from here <a href="https://bl.ocks.org/d3noob/3c040800ff6457717cca586ae9547dbf" rel="nofollow noreferrer">https://bl.ocks.org/d3noob/3c040800ff6457717cca586ae9547dbf</a> and have changed the data in json format and applied the code in my angular project. But d3 neither displays anything nor there is any error on chrome console. I'm new to d3 and unable to figure out the error. 
  Can someone help me with this?</p>
  
  <p>Here's my angular ts file.</p>
  
  <pre><code>import * as D3 from 'd3';
  import * as data from './data.json';
  @Component({
    selector: 'app-linechart',
    templateUrl: './linechart.component.html',
    styleUrls: ['./linechart.component.scss']
  })
  export class LinechartComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
      this.createLineChart();
    }
    public createLineChart(): void {
      console.log('in line method');
      console.log(D3);
      console.log(data);
      console.log(data[0]);
      const d3: any = D3;
      // tslint:disable-next-line:one-variable-per-declaration
      const margin = {top: 20, right: 20, bottom: 70, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
  
  // parse the date / time
      const parseTime = d3.timeParse('%d-%b-%y');
  
  // set the ranges
      const x = d3.scaleTime().range([0, width]);
      const y = d3.scaleLinear().range([height, 0]);
  
  // define the line
      const valueLine = d3.line()
        .x(d =&gt; d.date)
        .y(d =&gt; d.close);
  
  // append the svg object to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
      const svg = d3.select('body').append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform',
          'translate(' + margin.left + ',' + margin.top + ')');
  
        // Scale the range of the data
      x.domain(d3.extent(data, d =&gt; d.date));
      y.domain([0, d3.max(data, d =&gt; d.close)]);
  
        // Add the valueline path.
      svg.append('path')
          .data([data])
          .attr('class', 'line')
          .attr('d', valueLine);
  
        // Add the X Axis
      svg.append('g')
          .attr('class', 'axis')
          .attr('transform', 'translate(0,' + height + ')')
          .call(d3.axisBottom(x).ticks(10))
          .selectAll('text')
          .style('text-anchor', 'end')
          .attr('dx', '-.8em')
          .attr('dy', '.15em')
          .attr('transform', 'rotate(-65)');
  
        // Add the Y Axis
      svg.append('g')
          .attr('class', 'axis')
          .call(d3.axisLeft(y));
    }
  
  }
  </code></pre>
  
  <p>and data.json</p>
  
  <pre><code>  {
      "date": "1-May-12",
      "close": 58.13
    },
    {
      "date": "30-Apr-12",
      "close": 53.98
    },
    {
      "date": "27-Apr-12",
      "close": 67
    },
    {
      "date": "26-Apr-12",
      "close": 89.7
    },
    {
      "date": "25-Apr-12",
      "close": 99
    },
    {
      "date": "24-Apr-12",
      "close": 130.28
    },
    {
      "date": "23-Apr-12",
      "close": 166.7
    },
    {
      "date": "20-Apr-12",
      "close": 234.98
    },
    {
      "date": "19-Apr-12",
      "close": 345.44
    },
    {
      "date": "18-Apr-12",
      "close": 443.34
    },
    {
      "date": "17-Apr-12",
      "close": 543.7
    },
    {
      "date": "16-Apr-12",
      "close": 580.13
    },
    {
      "date": "13-Apr-12",
      "close": 605.23
    },
    {
      "date": "12-Apr-12",
      "close": 622.77
    },
    {
      "date": "11-Apr-12",
      "close": 626.2
    },
    {
      "date": "10-Apr-12",
      "close": 628.44
    },
    {
      "date": "9-Apr-12",
      "close": 636.23
    },
    {
      "date": "5-Apr-12",
      "close": 633.68
    },
    {
      "date": "4-Apr-12",
      "close": 624.31
    },
    {
      "date": "3-Apr-12",
      "close": 629.32
    },
    {
      "date": "2-Apr-12",
      "close": 618.63
    },
    {
      "date": "30-Mar-12",
      "close": 599.55
    },
    {
      "date": "29-Mar-12",
      "close": 609.86
    },
    {
      "date": "28-Mar-12",
      "close": 617.62
    },
    {
      "date": "27-Mar-12",
      "close": 614.48
    },
    {
      "date": "26-Mar-12",
      "close": 606.98
    }
  ]
  '''
  
  
  
  
  </code></pre>