Javascript 如何在d3 js垂直分组条形图中添加工具提示

我正在创建一个动画的分组条形图。我能够通过下面提供的代码创建一个简单的垂直分组条形图。现在，我想添加一些工具提示，这些提示将显示有关该条的一些特定数据。例如，“字母：A，频率：0.05”。有人能帮我解决这个问题吗？提前谢谢：）

var margin={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=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（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
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+”）；
风险值数据=[
{字母：“A”，频率：.08167，深度：.32}，
{字母：“B”，频率：.01492，深度：.69}
];
var groupNames=d3.keys（数据[0]）.filter（函数（键）{返回键！=“字母”}）
data.forEach（函数（d）{
d、 groups=groupNames.map（函数（名称）{return{name:name，value:+d[name]}；}）
});
域（data.map（函数（d）{alert（d.letter）；返回d.letter；}））；
x1.域名（组名）.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（数据，函数（d））{
返回d3最大值（d组，函数（d）{
返回d值；
});
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“信趣”）；
var letter=svg.selectAll（“.letter”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“transform”，函数（d）{return”translate（“+x0（d.letter）+”，0）”；}）；
字母。选择全部（“rect”）
.data（函数（d）{返回d.groups；}）
.enter（）.append（“rect”）
.attr（“宽度”，x1.rangeBand（））
.attr（“x”，函数（d）{alert（d.name）；返回x1（d.name）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
字母。选择全部（“文本”）
.data（函数（d）{返回d.groups；}）
.enter（）.append（“文本”）
.attr（“类”、“barstext”）
.attr（“x”，函数（d）{返回x1（d.name）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.text（函数（d）{返回d.value；}）
var legend=svg.selectAll（“.legend”）
.data（groupNames.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*20+”）；}）；
图例。追加（“rect”）
.attr（“x”，宽度-18）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.text（函数（d）{return d；}）
正文{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充：钢蓝；
}
.x轴路径{
显示：无；
}
步骤1:将字母信息添加到组数据中

data.forEach(function(d) {
  d.groups = groupNames.map(function(name) {
    return {
      name: name,
      letter: d.letter,
      value: +d[name]
    };
  })
});

第2步：将标题附加到栏中

.append("title")
.text(function(d,i){
     var name = d.name.replace(/^./,d.name[0].toUpperCase());
     return "Letter : "+d.letter+" \n"+name+" : "+d.value;
});


var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=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（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
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+”）；
风险值数据=[{
信：“A”，
频率：.08167，
深度：.32
}, {
信：“B”，
频率：.01492，
深度：.69
}];
var groupNames=d3.keys（数据[0]）.filter（函数（键）{
返回键！=“字母”；
})
data.forEach（函数（d）{
d、 groups=groupNames.map（函数（名称）{
返回{
姓名:姓名,，
信：d.letter，
值：+d[名称]
};
})
});
x0.domain（data.map）（函数（d）{
回信；
}));
x1.域名（组名）.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（数据，函数（d））{
返回d3最大值（d组，函数（d）{
返回d值；
});
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“信趣”）；
var letter=svg.selectAll（“.letter”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“转换”，函数（d）{
返回“translate”（+x0(