Javascript 如何避免标签显示在堆叠条形图上？

嗨，我有一个使用d3js v4开发的堆叠条形图。我需要一些人帮忙修理它。这是它当前的显示方式

我想解决以下问题 1） 当前未显示总计数，我想显示每个条上的总计数 2） y轴是否不显示 3） 标签重叠在图片中的第三个栏上。我想避免这种情况

下面是我的代码

//创建svg
常量边距={top:20，right:20，bottom:60，left:60}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
const svg=d3.select（“div#historogramholder”）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var g=svg.append（“g”）；
//设置x刻度
var x=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填塞器（0.05）
.对齐（0.1）；
//设置y刻度
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
//设置颜色
var z=d3.scaleOrdinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
让数据=[
{“国家”：“AL”，
“5岁以下”：150，
“5至13年”：50，
“14至17年”：100，
“18至24岁”：250，
“25至44岁”：300岁，
“45至64岁”：300岁，
“65岁及以上”：250，
“总数”：1 400
},
{“州”：“AK”，
“5年以下”：“250”，
“5至13年”：“300年”，
“14至17年”：“300年”，
“18至24年”：“250年”，
“25至44岁”：“100岁”，
“45至64岁”：“50岁”，
“65岁及以上”：“150”，
“总数”：1 400
},
{“州”：“AG”，
“5年以下”：“250”，
“5至13年”：“300年”，
“14至17年”：“300年”，
“18至24年”：“250年”，
“25至44岁”：“100岁”，
“45至64岁”：“50岁”，
“65岁及以上”：“150”，
“总数”：1 400
}
];
//钥匙[“5岁以下”、“5至13岁”、“14至17岁”、“18至24岁”、“25至44岁”、“45至64岁”、“65岁及以上”]
var键=[“5年以下”、“5至13年”、“14至17年”、“18至24年”、“25至44年”、“45至64年”、“65年及以上”]；
sort（函数（a，b）{返回b.total-a.total；}）；
x、 域（data.map（函数（d）{返回d.State；}））；
y、 域（[0，d3.max（数据，函数（d）{return d.total；}）]）.nice（）；
z、 域（密钥）；
g、 附加（“g”）
.全选（“g”）
.data（d3.stack（）.key（key）（数据））
.enter（）.append（“g”）
.attr（“fill”，函数（d）{返回z（d.key）；}）
.selectAll（“rect”）
.data（函数（d）{return d；}）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{返回x（d.data.State）；}）
.attr（“y”，函数（d）{返回y（d[1]）；}）
.attr（“height”，函数（d）{返回y（d[0]）-y（d[1]）；}）
.attr（“宽度”，x.带宽（））
.on（“mouseover”，function（）{tooltip.style（“display”，null）；}）
.on（“mouseout”，function（）{tooltip.style（“display”，“none”）；}）
.on（“mousemove”，函数（d）{
//控制台日志（d）；
var xPosition=d3.鼠标（this）[0]-5；
var yPosition=d3.鼠标（this）[1]-5；
attr（“transform”、“translate”（+xPosition+）、“+yPosition+”）；
工具提示。选择（“文本”）。文本（d[1]-d[0]）；
});
g、 附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴”）
.call（d3.axisLeft（y）.ticks（null，“s”））
.append（“文本”）
.attr（“x”，2）
.attr（“y”，y（y.ticks（）.pop（））+0.5）
.attr（“dy”，“0.32em”）
.attr（“填充”、“千”）
.attr（“字体大小”、“粗体”）
.attr（“文本锚定”、“开始”）；
var图例=g.append（“g”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，10）
.attr（“文本锚定”、“结束”）
.全选（“g”）
.data（key.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*20+”）；}）；
图例。追加（“rect”）
.attr（“x”，宽度-19）
.attr（“宽度”，19）
.attr（“高度”，19）
.attr（“填充”，z）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9.5）
.attr（“dy”，“0.32em”）
.text（函数（d）{return d；}）；
//准备工具提示位，初始显示隐藏
var tooltip=svg.append（“g”）
.attr（“类”、“工具提示”）
.样式（“显示”、“无”）；
工具提示。追加（“rect”）
.attr（“宽度”，60）
.attr（“高度”，20）
.attr（“填充”、“白色”）
.样式（“不透明度”，0.5）；
工具提示。追加（“文本”）
.attr（“x”，30）
.attr（“dy”，“1.2米”）
.style（“文本锚定”、“中间”）
.attr（“字体大小”，“12px”）
.attr（“字体重量”、“粗体”）
正文{
字体系列：“开放式Sans”，无衬线；
}
#主要{
宽度：960px；
}
.axis.domain{
显示：无；
}


当前未显示总计数，我想显示
每个条上的总计数

我添加了总数，但您的数据具有相同的总数

2） 是指y轴不显示

只需删除
.domain
CSS选择器

3） 标签重叠在图片中的第三个栏上。我想
避免这种情况

通过正确处理
边距
填充
D3模式来修复

修复了以下代码段中的问题：


const margin={top:20，right:160，bottom:60，left:60}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
常量svg=d3
.选择（“div#historogramholder”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
{
{
/*var g=svg.append（“g”）*/
}
}
常数g=svg
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//设置x刻度
var x=d3
.scaleBand（）
.rangeRound（[0，宽度]）
.填塞器（0.05）
.对齐（0.1）；
//设置y刻度
变量