Javascript D3-堆叠图表在条形图顶部显示总值

我需要在堆叠图表顶部显示总值，我使用的是D3堆叠条形图，角度为7

我已尝试实现，但遇到一个错误，错误为错误类型错误：无法读取未定义的属性“域”

让我知道目前的实施有什么问题，或者感谢大家提供一些参考

// Get Stacked chart data
      let stackedJsonData = this.getStackChartData.data;
      var data = Array();

      // Loop to iterate the JSON to fetch stacked chart data
      for (let k = 0; k < stackedJsonData.length; k++) {
        var objItem = {};
        var key_name = Object.keys(stackedJsonData[k])[0];
        objItem["State"] = key_name;

        var objArray = stackedJsonData[k][key_name];

        for (var i = 0; i < objArray.length; i++) {
          var keyNm = "id" + (i + 1);
          objItem[keyNm.toString()] = objArray[i];
        }
        data.push(objItem);
      }

      let keys = Object.getOwnPropertyNames(data[0]).slice(1);

      data = data.map(v => {
        v.total = keys.map(key => v[key]).reduce((a, b) => a + b, 0);
        return v;
      });

      data.sort((a: any, b: any) => b.total - a.total);

      this.x.domain(data.map((d: any) => d.State));
      this.y.domain([0, d3Array.max(data, (d: any) => d.total)]).nice();
      this.z.domain(keys);

      this.g
        .append("g")
        .selectAll("g")
        .data(d3Shape.stack().keys(keys)(data))
        .enter()
        .append("g")
        .attr("fill", d => this.z(d.key))
        .selectAll("rect")
        .data(d => d)
        .enter()
        .append("rect")
        .attr("x", d => this.x(d.data.State))
        .attr("y", d => this.y(d[1]))
        .attr("height", d => this.y(d[0]) - this.y(d[1]))
        .attr("width", this.x.bandwidth());


      // Draw stacked chart x-axis
      this.g
        .append("g")
        .attr("class", "axis")
        .attr("transform", "translate(18," + this.height + ")")
        .attr("color", "#ebecf5")
        .call(d3Axis.axisBottom(this.x));

      //Draw stacked chart y-axis
      this.g
        .append("g")
        .attr("class", "axis")
        .attr("color", "#ebecf5")
        .call(d3Axis.axisLeft(this.y).ticks(null, "s"))
        .append("text")
        .attr("x", 2)
        .attr("y", this.y(this.y.ticks().pop()) + 0.5);

      // Display total value on top of stacked bar
      this.g
        .selectAll("g")
        .data(d3Shape.stack().keys(keys)(data))
        .enter()
        .attr("fill", d => this.z(d.key))
        .append("text")
        .data(d => d)
        .attr("class", "yAxis-label")
        .attr("fill", "#70747a")
        .attr("text-anchor", "middle")
        .attr("x", d => this.x(d.data.State))
        .attr("y", d => this.y(d[1]) - 5)
        .text(d => d.data.State);

//获取堆叠图表数据
让stackedJsonData=this.getStackChartData.data；
var data=Array（）；
//循环以迭代JSON以获取堆叠图表数据
for（设k=0；k{
v、 total=keys.map（key=>v[key]）.reduce（（a，b）=>a+b，0）；
返回v；
});
data.sort（（a:any，b:any）=>b.total-a.total）；
这个.x.domain（data.map（（d:any）=>d.State））；
this.y.domain（[0，d3Array.max（数据，（d:any）=>d.total）]）.nice（）；
此.z.域（键）；
这个
.附加（“g”）
.全选（“g”）
.data（d3Shape.stack（）.key（key）（数据））
.输入（）
.附加（“g”）
.attr（“fill”，d=>this.z（d.key））
.selectAll（“rect”）
.数据（d=>d）
.输入（）
.append（“rect”）
.attr（“x”，d=>this.x（d.data.State））
.attr（“y”，d=>this.y（d[1]））
.attr（“height”，d=>this.y（d[0]）-this.y（d[1]））
.attr（“宽度”，即.x.带宽（））；
//在x轴上绘制堆叠图表
这个
.附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（18“+this.height+”））
.attr（“颜色”、“ebecf5”）
.call（d3Axis.axisBottom（this.x））；
//沿y轴绘制堆叠图表
这个
.附加（“g”）
.attr（“类”、“轴”）
.attr（“颜色”、“ebecf5”）
.call（d3Axis.axisLeft（this.y）.ticks（null，“s”））
.append（“文本”）
.attr（“x”，2）
.attr（“y”，this.y（this.y.ticks（）.pop（））+0.5）；
//在堆叠条的顶部显示总值
这个
.全选（“g”）
.data（d3Shape.stack（）.key（key）（数据））
.输入（）
.attr（“fill”，d=>this.z（d.key））
.append（“文本”）
.数据（d=>d）
.attr（“类”、“雅克斯标签”）
.attr（“填充”，“#70747a”）
.attr（“文本锚定”、“中间”）
.attr（“x”，d=>this.x（d.data.State））
.attr（“y”，d=>this.y（d[1]）-5）
.text（d=>d.data.State）；

如错误消息所述，

this.x

、

this.y

或

this.z

未定义。您是否在某个地方实例化它们，比如在构造函数中？

否它们是定义为私有x:any的全局变量；私人y：任何；私人z：任何；是的，但这与实例化它们不同。您需要将它们分配给这样一个变量：

this.x=d3.scaleLinear（）；this.y=d3.scaleLinear（）。对于不同的轴，可能需要使用不同的比例，例如颜色的
scaleOrdinal
。请查看以了解更多信息