D3.js+；CSS按钮功能

我一直在努力研究这个特殊的图表，它是一个从Mike Bostock的模板中修改的子弹图。我想用一些按钮事件来增强它，特别是：当你点击一个按钮时，它会调用一个转换动画来将图形标记更改为新的值。代码中以原始数据形式提供了新值和旧值。为了清晰和上下文，我将代码完整地包含在其中。在下面搜索我的注释“//混淆”以进入我定义按钮功能的部分

子弹图
身体{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
保证金：自动；
填充顶部：40px；
位置：相对位置；
/*宽度：100%*/
}
桌子{
宽度：60%；
左边距：自动；
右边距：自动；
}
td{宽度：50%；}
.bulleT{font:10px无衬线；左边距：自动；右边距：自动；}
.bulleT.marker{笔划：#4d；笔划宽度：2px；}
.bulleT.marker.s0{填充不透明度：0；笔划：#999999；笔划宽度：2px；}
.bulleT.marker.s1{填充不透明度：0；笔划：#000；笔划宽度：2px；}
.bulleT.tick行{笔划：#666；笔划宽度：.5px；}
.bulleT.range.s0{填充：#005C7A；}
.bulleT.range.s1{fill:#29A3CC；}
.bulleT.range.s2{fill:#c6dbef；}
.bulleT.range.s3{fill:#29A3CC；}
.bulleT.range.s4{填充：#005C7A；}
.bulleT.measure.s0{填充：#4d；}
.bulleT.measure.s1{填充：#999999；}
.bulleT.measure.s2{填充：#eeeeee；}
.bulleT.measure.s3{填充：#999999；}
.bulleT.measure.s4{填充：#4d；}
.bulleT.title{font size:12px；font-weight:bold；}
.bulleT.subtitle.s04{填充：000000；字体大小：16px；字体重量：粗体；}
.bulleT.subtitle.s13{填充：999999；字体大小：12px；字体重量：粗体；}
.bulleT.subtitle.s2{fill:#99999；字体大小：10px；}
.选择权{
字体系列：播放；
颜色：#ffffff；
字体大小：12px；
宽度：6%；
背景:#303030；
填充：10px 20px 10px 20px；
}
.选项：悬停{
背景：#4d；
}
分区选项2{
位置：相对位置；
顶部：10px；
}
结果1
结果2
子弹图在这里

（功能（）{
//基于mbostock子弹图的简单修改。
d3.bulleT=函数（）{
var orient=“left”，
反向=假，
垂直=假，
terjedelem=子弹terjedelem，
范围=项目符号范围，
标记=项目符号，
措施=措施，
宽度=380，
高度=30，
tickFormat=null；
//对于每个小倍数
功能项目符号（g）{
g、 每个（功能（d，i）{
var terjedelemz=terjedelem.call（this，d，i），
rangez=ranges.call（this，d，i）.slice（）.sort（d3.descending），
markerz=markers.call（this，d，i），
measurez=measures.call（this，d，i）.slice（）.sort（d3.descending），
g=d3。选择（本）；
var wrap=g.select（“g.wrap”）；
如果（wrap.empty（））wrap=g.append（“g”）.attr（“class”，“wrap”）；
//计算x标度。
var x0=d3.scale.linear（）
.domain（[terjedelemz[0]，terjedelemz[1]]）
.范围（反向？[width，0]：[0，width]）；
//把新秤藏起来。
这是一张图表；
//从x比例导出宽度比例。
var w=子弹宽度（x0，terjedelemz[0]）；
//更新范围矩形。
rangez.unshift（terjedelemz[1]）；
var range=wrap.selectAll（“rect.range”）
.数据（rangez）；
range.enter（）.append（“rect”）
.filter（函数（d，i）{if（i！=3）{返回d}）
.attr（“类”，函数（d，i）{return“range s”+i；}）
.attr（“宽度”，w）
.attr（“y”，0）
.attr（“高度”，高度）
.attr（“x”，反方向为x0:0）；
range.enter（）.append（“行”）
.filter（函数（d，i）{if（i==3）{返回d}）
.attr（“类”、“标记”）
.attr（“x1”，x0）
.attr（“x2”，x0）
.attr（“y1”，0）
.attr（“y2”，高度）；
//附加度量值矩形。
测量未移位（terjedelemz[1]）；
var-measure=wrap.selectAll（“rect.measure”）
.数据（measurez）；
measure.enter（）.append（“rect”）
.attr（“类”，函数（d，i）{return“measures s”+i；}）
.attr（“宽度”，w）
.attr（“高度”，高度/2）
.attr（“x”，反向？x0:0）
.attr（“y”，高度/4）；
//追加rect和行标记。
var marker=wrap.selectAll（“rect.marker”）
.数据（markerz）；
marker.enter（）.append（“rect”）
.filter（函数（d，i）{if（i==1）{返回d}）
.attr（“类别”、“标记s1”）
.attr（“宽度”，6）
.attr（“y”，-（高度/10））
.attr（“高度”，函数（d）{返回高度+（高度/5）；}）
.attr（“x”，x0）
.attr（“转换”、“翻译（-3,0）”）；
//下面的混乱
var option1=d3。选择（“选项1”）；
选项1.on（“点击结果”，结果1）；
//选项1.on（'click.val'，val=[1002001000,20]）；
var option2=d3。选择（“option2”）；
选项2.on（“点击结果”，结果2）；
功能结果1（val）{
d、 markerz=[10002000,10,20]
d3.selectAll（'rect.marker'）
.transition（）
.持续时间（3000）
.attr（“x”，函数（d）{返回d}）
}
功能结果2（val）{
d、 markerz=[-1000，-2000，-10，-20]
d3.selectAll（'rect.marker'）
.transition（）
.持续时间（3000）
.attr（“x”，函数（d）{返回d}）
};
marker.enter（）.append（“行”）
.filter（函数（d，i）{if（i==0）{返回d}）
.attr（“类别”、“标记s0”）
.attr（“x1”，x0）
.attr（“x2”，x0）
.attr（“y1”，高度/4）
.attr（“y2”，高度-（高度/4））；
//计算刻度格式。
var format=tickFormat | | x0.tickFormat（8）；
//更新勾号组。
var tick=g.selectAll（“tick”）
.数据（x0.8），函数（d）{
返回此.textContent | |格式（d）；
});
//初始化ti