Javascript 分组条形图D3.js条形图内的文本

我确实参考了这个，做了一些修改，制作了这个条形图。尝试在基本上是计数的条内添加文本。例如，上游为50，因此50应位于坝内

为此我试过了，但做不到

var数据=[{
“标题”：“abc”，
“上游”：50，
“下游”：15
},
{
“标题”：“xyz”，
“上游”：107，
“下游”：12
}
]
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=600-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x0=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
var x1=d3.scale.ordinal（）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var color=d3.scale.ordinal（）
.范围（[“绿色”、“红色]）；
var xAxis=d3.svg.axis（）
.比例（x0）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick格式（d3格式（“.2s”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var ageNames=d3.键（数据[0]）.过滤器（函数（键）{
返回键！=“标题”；
});
data.forEach（函数（d）{
d、 ages=ageNames.map（函数（名称）{
返回{
姓名:姓名,，
值：+d[名称]
};
});
});
x0.domain（data.map）（函数（d）{
返回d.title；
}));
x1.domain（ageNames）.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（数据，函数（d））{
返回d3.max（d.age，函数d）{
返回d值；
});
})]);
//x轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“受调控基因的数量”）；
//栅栏
var title=svg.selectAll（“.title”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“头衔”）
.attr（“转换”，函数（d）{
返回“translate（“+x0（d.title）+”，0）”；
});
title.selectAll（“rect”）
.数据（功能（d）{
返回d.ages；
})
.enter（）.append（“rect”）
.attr（“宽度”，x1.rangeBand（））
.attr（“x”，函数（d）{
返回x1（d.name）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
.样式（“填充”，功能（d）{
返回颜色（d.name）；
});
//右边的图例
var legend=svg.selectAll（“.legend”）
.data（ageNames.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*20+”）；
});
图例。追加（“rect”）
.attr（“x”，宽度-18）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.文本（功能（d）{
返回d；
});
正文{
字体：12px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充：钢蓝；
}
.x轴路径{
显示：无；
}

在
之后追加
，如代码段所示：


var数据=[{
“标题”：“abc”，
“上游”：50，
“下游”：15
},
{
“标题”：“xyz”，
“上游”：107，
“下游”：12
}
]
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=600-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x0=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
var x1=d3.scale.ordinal（）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var color=d3.scale.ordinal（）
.范围（[“绿色”、“红色]）；
var xAxis=d3.svg.axis（）
.比例（x0）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick格式（d3格式（“.2s”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var ageNames=d3.键（数据[0]）.过滤器（函数（键）{
返回键！=“标题”；
});
data.forEach（函数（d）{
d、 ages=ageNames.map（函数（名称）{
返回{
姓名:姓名,，
值：+d[名称]
};
});
});
x0.domain（data.map）（函数（d）{
返回d.title；
}));
x1.domain（ageNames）.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（数据，函数（d））{
返回d3.max（d.age，函数d）{
返回d值；
});
})]);
//x轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“受调控基因的数量”）；
//栅栏
var title=svg.selectAll（“.title”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“头衔”）
.attr（“转换”，函数（d）{
返回“translate（“+x0（d.title）+”，0）”；
});
title.selectAll（“rect”）
.数据（功能（d）{
返回d.ages；
})
.enter（）.append（“rect”）
.attr（“宽度”，x1.rangeBand（））
.attr（“x”，函数（d）{
返回x1（d.name）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
.样式（“填充”，功能（d）{
返回颜色（d.name）；
});
标题。选择全部（“文本”）
.数据（功能（d）{
返回d.ages；
})
.输入（）
.append（'文本'）
.classed（'bar-label'，true）
.text（d=>d.value）
.attr（“x”，函数（d）{
返回x1（d.name）+x1.rangeBand（）/2；
})
.attr（“y”，函数（d）{
返回y（d值）+4；
})
.attr（'text-anchor'，'middle'）
.attr（'alignment-baselin