Javascript 在条形图d3js旁边添加计数

我试图在每个条旁边添加计数（条的值），但计数不可见。我尝试为文本添加不透明度，甚至z索引，以检查其是否被条重叠，但没有帮助。 关于inspect element，我了解到标签被封装在内部，这导致了问题，请任何人指导我，以便我更正代码

是否可以在刷新数据时更新值

代码如下：

datasetOption1=[{
标签：“10-20”，
价值：22，
计数：22
}, {
标签：“20-30”，
价值：33，
计数：33
}, {
标签：“30-40”，
价值：4，
计数：4
}, {
标签：“40-50”，
价值：15，
计数：15
}, {
标签：“50-60”，
价值：36，
计数：36
}];
数据集选项2=[{
标签：“1类”，
数值：10，
计数：11
}, {
标签：“第2类”，
价值：20，
计数：3
}, {
标签：“第3类”，
数值：30，
计数：41
}, {
标签：“第4类”，
数值：5，
计数：17
}, {
标签：“第5类”，
数值：12，
计数：9
}, {
标签：“第6类”，
价值：23，
计数：33
}];
var chart=document.getElementById（“图表”）；
var保证金={
前10名，
右:20,，
底数：40，
左：50
},
宽度=400，
高度=300；
var div=d3.select（图表）.append（“div”）.attr（“类”，“工具提示”）；
var formatPercent=d3.format（“”）；
变量y=d3.scale.ordinal（）
.范围圆带（[高度，0]，.2,0.5）；
var x=d3.scale.linear（）
.范围（[0，宽度-20]）；
var xAxis=d3.svg.axis（）
.比例（x）
.滴答声（6）
.尺寸（5）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
//.格式（格式百分比）；
var svg=d3.选择（图表）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
d3.选择（“输入[值=\“总计\]”）属性（“选中”，为真）；
函数更改（数据集）{
var dataMax=d3.max（数据集，函数（d）{
返回d.count；
});
y、 域（dataset.map）（函数（d）{
返回d.标签；
}));
x、 域（[0，（dataMax*1.4）]）；
scale=d3.scale.linear（）
.domain（[0，（dataMax*1.4）]）
.范围（[0，宽度-40-10]）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+parseInt（高度+边距.top+10）+”）
.呼叫（xAxis）；
svg.select（“.y.axis”）.remove（）；
svg.select（“.x.axis”）.remove（）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（0）”）
.attr（“x”，50）
.attr（“dx”，“.1em”）
.样式（“文本锚定”、“结束”）；
/*.文本（“选项%”）*/
var bar=svg.selectAll（“.bar”）
.数据（数据集、函数（d）{
返回d.标签；
});
//新数据：
bar.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.count）；
})
.attr（“y”，函数（d）{
返回y（d标签）；
})
.attr（“宽度”，函数（d）{
返回宽度-x（d.计数）；
})
.attr（“高度”，y.rangeBand（））；
//在每个栏的右侧添加一个值标签
附加条（“文本”）
.attr（“类别”、“标签”）
//标签的y位置位于横杆的中间位置
.attr（“y”，函数（d）{
返回y（d.label）+y.rangeBand（）/2+4；
})
//x位置是条形图右侧的3个像素
.attr（“x”，函数（d）{
返回x（d.count）+3；
})
.文本（功能（d）{
返回d.count；
});
//删除的数据：
bar.exit（）.remove（）；
//更新数据：
bar.transition（）
.持续时间（750）
.attr（“x”，函数（d）{
返回0；
})
.attr（“cx”，0）
.attr（“y”，函数（d）{
返回y（d标签）；
})
.attr（“宽度”，函数（d）{
返回x（d.count）；
})
.attr（“高度”，y.rangeBand（））；
}
变更（数据选择1）；
$（'#btnChange'）。在（'click'，function（）上{
变更（数据设置选项2）
})

svg{
宽度：100%；
高度：350px；
}
.酒吧{
填充：rgb（39、85、130）；
/*填充：#A18FDB*/
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
笔画宽度：1px；
形状渲染：边缘清晰；
}

更改

您正在使用

rect

DOM添加

text

DOM，这就是您没有看到文本标签的原因

要解决此问题，请执行以下操作：

组成这样一个小组：

  bar.enter().append("g")
    .attr("class", "bar")

将您的

rect

和

text

DOM添加到组中

最后，对于rect DOM的转换，请从组中选择rect：

bar.selectAll（“rect”）.transition（）
.持续时间（750）
.attr（“x”，函数（d）{

---

工作代码

感谢@Cyril的回复，这帮了我很大的忙。有没有办法我可以在相反的方向上更改初始的条形图过渡？正如你看到的，在加载时条形图的过渡是从右角到左角的，我希望它保持在左角。好吧，这是另一个问题，如果你不能得到任何的释放，就把它贴出来蚂蚁代码。