无法创建堆积的条形图？

Question

我正在使用d3图表创建堆积的条形图。我在前端有按钮。单击按钮时应显示图表。单击按钮时出现以下错误。

TypeError：无法读取未定义的属性“ map”。

我试图从“ rxjs / operators”导入地图运算符。但是它不起作用。

 import * as d3 from 'd3';
    export class stackedbarchart  {
        sbar(box_id){

          d3.select(box_id)
          .select("svg")
          .remove();

          var margin = {top: 20, right: 160, bottom: 35, left: 30};

          var width = 960 - margin.left - margin.right,
              height = 500 - margin.top - margin.bottom;

          var 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 + ")");

          var data = [
            { "country":"India", "sales":100, "profit":100, "loss":10 },
            { "country":"India", "sales":100, "profit":100, "loss":10 },
            { "country":"India", "sales":100, "profit":100, "loss":10 }
          ];

          var dataset = d3.stack()(["sales", "profit", "loss"].map(function(values) {
            return data.map(function(d) {
              return {x: d.country, y: +d[values]};
            });
          }));

          var x = d3.scaleOrdinal()
            .domain(dataset[0].map(function(d) { return d.x; }))
            .rangeRoundBands([10, width-10], 0.02);

          var y = d3.scaleLinear()
            .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
            .range([height, 0]);

          var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];

          var yAxis = d3.axisLeft(y)
            .ticks(5)
            .tickSize(-width, 0, 0)
            .tickFormat( function(d) { return d } );

          var xAxis = d3.axisBottom(x)

          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

          var groups = svg.selectAll("g.cost")
            .data(dataset)
            .enter().append("g")
            .attr("class", "cost")
            .style("fill", function(d, i) { return colors[i]; });

          var rect = groups.selectAll("rect")
            .data(function(d) { return d; })
            .enter()
            .append("rect")
            .attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return y(d.y0 + d.y); })
            .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
            .attr("width", x.rangeBand())
            .on("mouseover", function() { tooltip.style("display", null); })
            .on("mouseout", function() { tooltip.style("display", "none"); })
            .on("mousemove", function(d) {
              var xPosition = d3.mouse(this)[0] - 15;
              var yPosition = d3.mouse(this)[1] - 25;
              tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
              tooltip.select("text").text(d.y);
            });

          var legend = svg.selectAll(".legend")
            .data(colors)
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

          legend.append("rect")
            .attr("x", width - 18)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", function(d, i) {return colors.slice().reverse()[i];});

          legend.append("text")
            .attr("x", width + 5)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "start")
            .text(function(d, i) { 
              switch (i) {
                case 0: return "sales";
                case 1: return "profit";
                case 2: return "loss"; 
              }
            });

          var tooltip = svg.append("g")
            .attr("class", "tooltip")
            .style("display", "none");

          tooltip.append("rect")
            .attr("width", 30)
            .attr("height", 20)
            .attr("fill", "white")
            .style("opacity", 0.5);

          tooltip.append("text")
            .attr("x", 15)
            .attr("dy", "1.2em")
            .style("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("font-weight", "bold");
        }
}

任何帮助或向正确方向的提示将不胜感激。