D3 JS：在d3 v4 angular2中实现分组水平条形图

Question

我正在尝试在angular2中的d3 v4中实现分组水平条形图。

我有一个小提琴链接，位于d3 v3 - https://jsfiddle.net/rafaveguim/6y9ptkw6/

我试图在d3 v4中实现它，数据是json格式。 这是stackblitz链接： - https://stackblitz.com/edit/angular-9xr14t?file=app%2Fapp.component.ts

但是，我陷入了错误。

请帮助实施分组水平条形图。

代码如下： -

app.component.ts

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);

  }
}