Javascript 如何在水平堆叠条形图中显示条形值

我是D3新手，开发了一个水平堆叠条形图，但面临在条形图右角显示条形值的问题

var组=[“field2”、“field3”]；
var mainDiv=“#图表”；
var mainDivName=“图表”；
var轴底；
左上角；
var dealsData=[{
字段1：“公司-1”，
字段2:500.0，
字段3:400.0，
},
{
字段1：“公司-2”，
字段2:200.0，
字段3:700.0，
},
{
字段1：“公司-3”，
字段2:113.2，
字段3:850.0，
},
{
字段1：“公司-4”，
字段2:140.4，
字段3:83.0，
},
{
字段1：“公司-5”，
字段2:75.5，
字段3:27.5，
},
{
字段1：“公司-6”，
字段2:140.0，
字段3:440.0，
},
{
字段1：“公司-6”，
字段2:79.5，
字段3:107.5，
},
];
var layers=d3.stack（）.keys（组）.offset（d3.stackoffsetdiversing）(
德尔斯达
);
var svg=d3。选择（“svg”），
保证金={
前20名，
右:30,，
底数：50，
左:80,，
},
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var x=d3.scaleLinear（）.rangeRound（[margin.left，width-margin.right]）；
x、 域（[d3.min（layers，stackMin），d3.max（layers，stackMax）]；
变量y=d3
.scaleBand（）
.rangeRound（[height-margin.bottom，margin.top]）
.填充（0.5）；
y、 领域(
dealsData.map（函数（d）{
返回d.field1；
})
);
函数stackMin（层）{
返回d3.min（图层、功能（d）{
返回d[0]；
});
}
函数stackMax（层）{
返回d3.max（层，函数（d）{
返回d[1]；
});
}
this.axisBottom=d3.axisBottom（x）.tickSize（-430）；
变量颜色=[“#00FF00”、“#FF0000”]；
var eleX=svg
.附加（“g”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.call（this.axisBottom）；
埃利克斯
.append（“文本”）
.attr（“x”，宽度/2）
.attr（“y”，margin.bottom*1）
.attr（“dx”，“0.32em”）
.attr（“填充”、“千”）
.attr（“字体大小”、“粗体”）
.attr（“文本锚定”、“开始”）
.文本（“x轴”）；
埃利克斯
.selectAll（“行”）
.样式（“笔划宽度”、“0.6”）
.style（“不透明度”、“0.25”）
.风格（“笔划”、“阿达达”）；
埃利克斯
.selectAll（“路径”）
.样式（“笔划宽度”、“1”）
.style（“不透明度”、“0”）
.风格（“笔划”、“阿达达”）；
var bw=y.带宽；
console.log（'bw'，bw）；
log（“带宽：：”，bw）；
var ele=svg
.附加（“g”）
.attr（“变换”、“平移”（+margin.left+”，0））
.调用（d3.左（y））；
ele
.selectAll（“文本”）
.attr（“文本锚定”、“开始”）
.attr（“dx”、“15px”）
.attr（“dy”，y.带宽）
.style（“字体”、“源Sans Pro-Regular”）
.样式（“填充”、“#6C6F78”）；
ele
.selectAll（“rect”）
.attr（“文本锚定”、“开始”）
.attr（“dx”、“288px”）
.attr（“dy”、“-15px”）；
ele
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“x”，0-高度/2）
.attr（“y”，60-页边距。左）
.attr（“dy”，“0.32em”）
.attr（“填充”、“千”）
.attr（“字体大小”、“粗体”）
.attr（“文本锚定”、“中间”）
.文本（“y轴”）；
ele.selectAll（“线条”）.style（“笔划宽度”、“1”）.style（“不透明度”、“1”）；
//.style（'stroke-dasharray'，'2,2'）；
ele.selectAll（“路径”）.attr（“不透明度”、“0”）；
var maing=svg.append（“g”）.选择所有（“g”）.数据（层）；
var g=维护
.输入（）
.附加（“g”）
.attr（“填充”，函数（d，i）{
返回颜色[i]；
});
var棒=g
.selectAll（“rect”）
.数据（功能（d）{
d、 forEach（功能（d1）{
d1.key=d.key；
返回d1；
});
返回d；
})
.输入（）
.append（“rect”）
.attr（“数据”，函数（d）{
变量数据={}；
数据[“键”]=d.key；
数据[“值”]=d.data[d.key]；
数据[“名称”]=d.data.field1；
var合计=0；
组图（功能（d1）{
总计=总计+d.数据[d1]；
});
数据[“总计”]=总计；
日志（“工具提示”，数据）；
返回JSON.stringify（数据）；
})
.attr（“宽度”，函数（d）{
返回x（d[1]）-x（d[0]）；
})
.attr（“x”，函数（d）{
返回x（d[0]）；
})
.attr（“y”，函数（d）{
返回y（d.data.field1）；
})
.attr（“高度”，y.带宽）
.attr（“rx”，2）
.attr（“ry”，2）；
条。追加（“文本”）
.attr（“类别”、“标签”）
.attr（“x”，函数（d）{
返回x（d.data.field2）+3；
})
.文本（功能（d）{
console.log（“条数据：“+d.data.field2+”/“+d.data.field3”）
返回d.data.field2+“/”+d.data.field3；
});
不可能将
文本
附加到
rect
元素，因为它们并不意味着要有孩子。您可以只绘制另一个
g
节点，并使用最后一组条形图中的数据。数据包含您需要的所有内容-它们知道最高条的
x
值，因此它们知道偏移量，并且它们的
d属性中也包含数据


var组=[“field2”、“field3”]；
var mainDiv=“#图表”；
var mainDivName=“图表”；
var轴底；
左上角；
var dealsData=[{
字段1：“公司-1”，
字段2:500.0，
字段3:400.0，
},
{
字段1：“公司-2”，
字段2:200.0，
字段3:700.0，
},
{
字段1：“公司-3”，
字段2:113.2，
字段3:850.0，
},
{
字段1：“公司-4”，
字段2:140.4，
字段3:83.0，
},
{
字段1：“公司-5”，
字段2:75.5，
字段3:27.5，
},
{
字段1：“公司-6”，
字段2:140.0，
字段3:440.0，
},
{
字段1：“公司-6”，
字段2:79.5，
字段3:107.5，
},
];
var layers=d3.stack（）.keys（组）.offset（d3.stackoffsetdiversing）(
德尔斯达
);
var svg=d3。选择（“svg”），
保证金={
顶部