Javascript 如何在条形图上增加条形图的值？

我的页面上有一个条形图。这是我在javascript上的条形图代码：

function drawFacilities(dataArray, id){
        var width = 1000, height = 500;
        var margin = {left: 250, right : 0, top: 20, bottom: 70}
        var verticalGap = 60;
        var horizontalGap = 10;
        var scaleMultiplier = 7;

        var widthScale = d3.scale.linear().domain([0, 100]).range([0,100])

        var colorScale = d3.scale.ordinal().domain([0,1,2,3,4,5,6])
                            .range(["#D7DF21","#FCB040","#F1592A","#0F75BC","#61CCEE","#C49A6C","#13A89E"])

        var canvas = d3.select(id).append("svg").attr("width",width).attr("height", height);

        canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom).attr("x2", width)
                .attr("y2", height - margin.bottom).attr("stroke-width", 2).attr("stroke", "#A6A7A6");

        canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom + 1)
                .attr("x2", margin.left).attr("y2", 5).attr("stroke-width", 2).attr("stroke", "#A6A7A6");



        canvas.selectAll(".facilitiesBar").append("rect").data(dataArray).enter().append("rect").attr("class", "facilitiesBar")
                .attr("width", function(d) { return widthScale(d) * scaleMultiplier;}).attr("height", 25)
                .attr("x", margin.left + 1).attr("y", function(d,i){ return margin.top + i * verticalGap;})
                .attr("fill", function(d,i){return colorScale(i);})

        var verticalLabel = ["Sports Field","Sports Instruments","Musical Instruments","Different types of competition",
                            "Scout,Girls/Boys Guide","No Instrument Available","Library"]

        canvas.selectAll(".facilitiesY").append("text")
              .data(verticalLabel).enter().append("text").text(function(d){return d}).attr("class", "facilitiesY")
                .attr("x", 0).attr("y", function(d,i){return margin.top + 20 + i * verticalGap})
                .attr("text-align", "left")

        var horizontalLabel = [1,2,3,4,5,6,7,8,9,10]
        canvas.selectAll(".facilitiesX").append("text").data(horizontalLabel).enter().append("text")
                 .text(function(d){return ""+d * 10;}).attr("class", "facilitiesX")
                 .attr("x", function(d){return (margin.left + 10 * d * scaleMultiplier);})
                 .attr("y", 450).attr("text-align", "left")

        canvas.append("text").text("(Response in %)").attr("x", 500).attr("y", 480)

}

酒吧看起来很像

我想在条形图上添加条形图的值。例如，33、34将显示在特定栏中，如

---

如何执行此操作？

为每个条添加文本标签，并设置x、y值，如下所示

var textPadding = 15;
canvas.selectAll(".bartext")
  .data(dataArray)
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "black")
  .attr("x", function(d, i) {
    return margin.left + textPadding + widthScale(d) * scaleMultiplier;
  })
  .attr("y", function(d, i) {
    return margin.top + 20 + i * verticalGap;
  })
  .text(function(d) {
    return d;
  });

var id=“#容器”，
dataArray=[10,20,45,24,36,10,26]；
可变宽度=1000，
高度=500；
var保证金={
左：250，
右:0,，
前20名，
底数：70
}
垂直间隙=60；
var水平间隙=10；
var scaleMultiplier=7；
var widthScale=d3.scale.linear（）.domain（[01100]）.range（[01100]））
var colorScale=d3.scale.ordinal（）.domain（[0,1,2,3,4,5,6]）
.范围（[“D7DF21”、“FCB040”、“F1592A”、“0F75BC”、“61CCEE”、“C49A6C”、“13A89E”））
var canvas=d3.select（id）.append（“svg”）.attr（“width”，width）.attr（“height”，height）；
canvas.append（“line”）.attr（“x1”，margin.left）.attr（“y1”，高度-margin.bottom）.attr（“x2”，宽度）
.attr（“y2”，高度-边距.底部）.attr（“笔划宽度”，2）.attr（“笔划”，“A6A6”）；
canvas.append（“line”）.attr（“x1”，margin.left）.attr（“y1”，高度-margin.bottom+1）
.attr（“x2”，边距。左）。attr（“y2”，5）。attr（“笔划宽度”，2）。attr（“笔划”，#a6a6”）；
canvas.selectAll（“.facilitiesBar”）.append（“rect”）.data（dataArray.enter（）.append（“rect”）.attr（“class”，“facilitiesBar”）
.attr（“宽度”，函数（d）{
返回宽度标度（d）*标度复用器；
}).attr（“高度”，25）
.attr（“x”，margin.left+1）.attr（“y”，函数（d，i）{
返回页边距.top+i*垂直间隙；
})
.attr（“填充”，函数（d，i）{
返回色标（i）；
})
var verticalLabel=[“运动场”、“运动器械”、“乐器”、“不同类型的比赛”，
“童子军，女孩/男孩指南”，“无可用仪器”，“图书馆”
]
canvas.selectAll（“.facilitiesY”）。追加（“文本”）
.data（verticalLabel）.enter（）.append（“text”）.text（函数（d）{
返回d
}).attr（“类别”、“设施”）
.attr（“x”，0）.attr（“y”，函数（d，i）{
返回页边距。顶部+20+i*垂直间隙
})
.attr（“文本对齐”、“左”）
var horizontalLabel=[1,2,3,4,5,6,7,8,9,10]
canvas.selectAll（“.facilitiex”）.append（“文本”）.data（水平标签）。enter（）.append（“文本”）
.文本（功能（d）{
返回“+d*10”；
}).attr（“类别”、“设施”）
.attr（“x”，函数（d）{
返回（左边距+10*d*scaleMultiplier）；
})
.attr（“y”，450）.attr（“文本对齐”，“左”）
canvas.append（“text”）.text（“响应%”）.attr（“x”，500）.attr（“y”，480）；
var=15；
canvas.selectAll（“.bartext”）
.数据（数据阵列）
.输入（）
.append（“文本”）
.attr（“类”、“bartext”）
.attr（“文本锚定”、“中间”）
.attr（“填充”、“黑色”）
.attr（“x”，函数（d，i）{
返回margin.left+文本填充+宽度刻度（d）*刻度乘法器；
})
.attr（“y”，函数（d，i）{
返回页边距。顶部+20+i*垂直间隙；
})
.文本（功能（d）{
返回d；
});
您能为您的问题创建一个工作表吗？我们可以更轻松地为您提供帮助。与问题无关：使用
var canvas
命名SVG选项是我最讨厌的事情之一。。。