title: D3 JS: Implementing grouped horizontal bar chart in d3 v4 angular2
body: <p>I am trying to implement grouped horizontal bar chart in d3 v4 in angular2.</p>
  
  <p>I have a fiddle link which is in d3 v3 - <a href="https://jsfiddle.net/rafaveguim/6y9ptkw6/" rel="nofollow noreferrer">https://jsfiddle.net/rafaveguim/6y9ptkw6/</a></p>
  
  <p>I am trying to implement it in d3 v4 and data is in json format.
  Here is stackblitz link:- <a href="https://stackblitz.com/edit/angular-9xr14t?file=app%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-9xr14t?file=app%2Fapp.component.ts</a></p>
  
  <p>But, I am stuck at the error.</p>
  
  <p>Please, help implementing grouped horizontal bar chart.</p>
  
  <h2>Code looks like:-</h2>
  
  <h2>app.component.ts</h2>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  declare var d3: any;
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
  
    constructor() { }
      ngOnInit() {
      this.draw();
    }
  
    draw() {
       var outerWidth = 500;
      var outerHeight = 250;
      var margin = {
        left: 90,
        top: 30,
        right: 30,
        bottom: 40
      };
      var barPadding = 0.2;
  
      var yColumn = "Category";
      var xColumn = "Orders";
      var colorColumn = "Brand";
      var layerColumn = colorColumn;
  
      var innerWidth = outerWidth - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top - margin.bottom;
  
      var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
  
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
  
      var yAxisG = g.append("g")
        .attr("class", "y axis");
  
      var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(235, 0)");
  
      var xScale = d3.scaleLinear().range([0, innerWidth]);
      var yScale = d3.scaleBand().rangeRound([0, innerHeight], barPadding);
      var colorScale = d3.scaleOrdinal(d3.schemeCategory20c);
  
  
      // var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
      //   .ticks(5)
      //   .tickFormat(d3.format("s"))
      //   .outerTickSize(0);
  
      // var yAxis = d3.svg.axis().scale(yScale).orient("left")
      //   .outerTickSize(0);
  
      //var colorLegend = d3.legend.color()
      //  .scale(colorScale)
      //  .shapePadding(2)
      //  .shapeWidth(15)
      //  .shapeHeight(15)
      //  .labelOffset(4);
  
      function render(data) {
  
          var nested = d3.nest()
            .key(function(d) {
              return d[layerColumn];
            })
            .entries(data);
  
          var stack = d3.stack()
        //    .x(function(d) { return d[yColumn];})
            .y(function(d) { return d["Orders"];})
            .values(function(d) {return d.values;});
            // .y(function(d) { return d[xColumn];})
            // .values(function(d) {return d.values;});
  
          var layers = stack(nested);
  
          yScale.domain(layers[0].values.map(function(d) {
            // return d[yColumn];
            return d["  "];
          }));
  
          xScale.domain([
            0,
            d3.max(layers, function(layer) {
              return d3.max(layer.values, function(d) {
                return d.y;
              });
            })
          ]);
  
          colorScale.domain(layers.map(function(layer) {
            return layer.key;
          }));
  
        //   var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        //   .ticks(5)
        //   .tickFormat(d3.format("s"))
        //   .outerTickSize(0);
  
        // var yAxis = d3.svg.axis().scale(yScale).orient("left")
        //   .outerTickSize(0);
          xAxisG.call(d3.axisBottom(this.xScale).ticks(5));
          yAxisG.call(d3.axisLeft(this.yScale)
          .ticks(10, "s"));
          // xAxisG.call(xAxis);
          // yAxisG.call(yAxis);
  
          var layers = g.selectAll(".layer").data(layers);
          layers.enter().append("g").attr("class", "layer");
          layers.exit().remove();
          layers.style("fill", function(d) {
            return colorScale(d.key);
          });
  
          var bars = layers.selectAll("rect").data(function(d) {
            return d.values;
          });
          var barWidth = yScale.scaleBand() / colorScale.domain().length;
          bars.enter().append("rect")
          bars.exit().remove();
          bars
            .attr("y", function(d, i, j) {
              return yScale(d[yColumn]) + barWidth * j;
            })
            .attr("x", function(d) {
              return xScale(d.x);
            })
            .attr("height", barWidth)
            .attr("width", function(d) {
              return xScale(d.y);
            })
  
          //colorLegendG.call(colorLegend);
        }
        function type(d) {
          d.Orders = +d.Orders;
          return d;
        }
        //console.log("yay");
        var data = d3.json( "assets/test.json");
        //console.log(d3.select("pre#datadata").text());
        //console.log(data);
       render(data);
        //d3.csv("BrandByCategoryTop5.csv", type, render);
  
    }
  }
  </code></pre>