title: Simple bar chart using Angular4 with d3.js version 4
body: <p>I am using Thomas Wanzek's service <a href="https://github.com/tomwanzek/d3-ng2-service" rel="nofollow noreferrer">d3-ng2-service</a> to render a bar-chart using d3 from a data in the format,</p>
  
  <pre><code>data = [
            {xVal : 1, yVal : 1},
            {xVal : 2, yVal : 4},
            {xVal : 3, yVal : 2},
            {xVal : 4, yVal : 3}
        ];
  </code></pre>
  
  <p>Here is my d3graph.component.ts file</p>
  
  <pre><code>import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
  
  import {
    D3Service,
    D3,
    Axis,
    BrushBehavior,
    BrushSelection,
    D3BrushEvent,
    ScaleLinear,
    ScaleOrdinal,
    Selection,
    Transition
  } from 'd3-ng2-service';
  
  
  @Component({
    selector: 'app-d3graph',
    template: '&lt;svg width="200" height="200"&gt;&lt;/svg&gt;'
  })
  export class D3graphComponent implements OnInit {
    private d3: D3;
    private parentNativeElement: any;
    private d3Svg: Selection&lt;SVGSVGElement, any, null, undefined&gt;;
  
    constructor(element: ElementRef, private ngZone: NgZone, d3Service: D3Service) {
      this.d3 = d3Service.getD3();
      this.parentNativeElement = element.nativeElement;
    }
  
    ngOnInit() {
              let self = this;
              let d3 = this.d3;
              let d3ParentElement: any;
              let svg: any;
              let xVal: number;
              let yVal: number;
              let data: { xVal: number, yVal: number}[] = [];
              let padding: number = 25;
              let w: number = 500;
              let h: number = 150;
              let xScale: any;
              let yScale: any;
              let xAxis: any;
              let yAxis: any;
  
      if (this.parentNativeElement !== null) {
        svg = d3.select(this.parentNativeElement)
            .append('svg')        // create an &lt;svg&gt; element
            .attr('width', w) // set its dimensions
            .attr('height', h);
  
        data = [
            {xVal : 1, yVal : 1},
            {xVal : 2, yVal : 4},
            {xVal : 3, yVal : 2},
            {xVal : 4, yVal : 3}
        ];
  
        xScale = d3.scaleLinear()
            .domain([0,d3.max(data, function(d) {return d.xVal})])
            .range([0, 200]);
  
        yScale = d3.scaleLinear()
            .domain([0,d3.max(data, function(d) {return d.yVal})])
            .range([100, 0]);
  
        xAxis =  d3.svg.axis(xScale) // d3 v.4
            .ticks(5)
            .scale(xScale)
            .orient("bottom");
  
        yAxis = d3.svg.axis(yScale)
            .scale(yScale)
            .orient("left")
            .ticks(7);
  
          svg.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(" + (padding) + "," + padding + ")")
          .call(yAxis);
  
             svg.append('g')            // create a &lt;g&gt; element
           .attr('class', 'axis')   // specify classes
             .attr("transform", "translate(" + padding + "," + (h - padding) + ")")
           .call(xAxis);            // let the axis do its thing
  
        var rects = svg.selectAll('rect')
            .data(data);
            rects.size();
  
        var newRects = rects.enter();
  
        newRects.append('rect')
            .attr('x', function(d, i) {
                return xScale(d.xVal);
            })
            .attr('y', function(d, i) {
                return yScale(d.yVal);
        })
              .attr("transform","translate(" + (padding -5) + "," + (padding - 5) + ")")
            .attr('height', 10)
            .attr('width', 10);
  
  
      }
  
     }
   }
  </code></pre>
  
  <p>I am getting an red underline of 'svg' for the xAxis = .... and yAxis = ... in the editor (Atom). This is also where the 'Failed to compile' error points to.</p>
  
  <p>But I know this service should work with d3 v.4 as in the package.json file it says, </p>
  
  <pre><code>  "description": "An Angular app which demonstrates the implementation of D3 version 4 components.",
  </code></pre>
  
  <p>When I comment out the xAxis and yAxis parts of the code the rectangles display fine. So what is the problem with the axes?</p>