Javascript d3v4-水平图表-标签

我正在制作一个水平条形图，但我正在努力将标签附加到系列上-我已经交换了各个波段-但我不确定这里缺少了什么-当我试图显示标签时，图表本身就破裂了

$（文档）.ready（函数（）{
var$this=$（'.horizontalbarchart'）；
风险值数据=[{
标签：“Gummi熊”，
价值：20，
},
{
标签：'Butterfinger'，
数值：5，
},
{
标签：“酸补丁儿童”，
数值：30，
},
{
标签：“杏仁乐”，
价值：40，
},
];
变量宽度=$this.data（'width'），
高度=$this.data（'height'）；
var color=d3.scaleOrdinal（）
.范围（[“eb6383”、“fa9191”、“ffe9c5”、“b4f2e1”）；
data.forEach（函数（d）{
d、 总计=+d.值；
});
var保证金={
前20名，
右:5,，
底数：30，
左：20
},
宽度=宽度-边距.left-边距.right，
高度=高度-margin.top-margin.bottom；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
x、 域（[0，d3.max（数据，函数（d））{
返回d值；
})]);
y、 域（data.map）（函数（d）{
返回d.total；
}));
var svg=d3.select（$this[0]）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（'类'，'条形图'）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var bar=svg.append（'g'）.attr（'class'，'bar'）；
条形图。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（'fill'，函数（d，i）{
返回颜色（i）；
})
.attr（“宽度”，函数（d）{
返回x（d.总计）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，y.带宽（））；
条。附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
条。附加（“g”）
.调用（d3.左（y））；
});
正文{
背景：#eeeeee；
}
#持有者{
溢出：隐藏；
}
皮查特先生{
边框：1px纯黑；
}
.Piechart路径{
行程：#中交；
笔画宽度：1px；
不透明度：0.8；
}
.图表文本{
字体大小：12px；
}
.图例矩形{
填充物：白色；
不透明度：0.8；
}
考虑以下几点。与附加条形图的方式一样，您还可以为每个值附加一个
文本
元素。然后使用
x（）
和
y（）
定位它们，并使用
.text（）
给它们一个值


$（文档）.ready（函数（）{
var$this=$（'.horizontalbarchart'）；
风险值数据=[{
标签：“Gummi熊”，
价值：20，
},
{
标签：'Butterfinger'，
数值：5，
},
{
标签：“酸补丁儿童”，
数值：30，
},
{
标签：“杏仁乐”，
价值：40，
},
];
变量宽度=$this.data（'width'），
高度=$this.data（'height'）；
var color=d3.scaleOrdinal（）
.范围（[“eb6383”、“fa9191”、“ffe9c5”、“b4f2e1”）；
data.forEach（函数（d）{
d、 总计=+d.值；
});
var保证金={
前20名，
右:5,，
底数：30，
左：80
},
宽度=宽度-边距.left-边距.right，
高度=高度-margin.top-margin.bottom；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
x、 域（[0，d3.max（数据，函数（d））{
返回d值；
})]);
y、 域（data.map）（函数（d）{
返回d.标签；
}));
var svg=d3.select（$this[0]）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（'类'，'条形图'）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var bar=svg.append（'g'）.attr（'class'，'bar'）；
条形图。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（'fill'，函数（d，i）{
返回颜色（i）；
})
.attr（“宽度”，函数（d）{
返回x（d.总计）；
})
.attr（“y”，函数（d）{
返回y（d标签）；
})
.attr（“高度”，y.带宽（））；
条。选择全部（“.label”）
.数据（数据）
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.attr（'text-anchor'，函数（d）{
返回d.total<20？'start'：'end'；
})
.attr（“x”，函数（d）{
返回d.total<20？x（d.total）+10:x（d.total）-10；
})
.attr（“y”，函数（d）{
返回y（d.标签）+y.带宽（）/2；
})
.attr（“dy”，5）
.文本（功能（d）{
返回d.标签；
});
条。附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
条。附加（“g”）
.调用（d3.左（y））；
});
正文{
背景：#eeeeee；
}
#持有者{
溢出：隐藏；
}
皮查特先生{
边框：1px纯黑；
}
.Piechart路径{
行程：#中交；
笔画宽度：1px；
不透明度：0.8；
}
.图表文本{
字体大小：12px；
}
.图例矩形{
填充物：白色；
不透明度：0.8；
}
考虑以下几点。与附加条形图的方式一样，您还可以为每个值附加一个
文本
元素。然后使用
x（）
和
y（）
定位它们，并使用
.text（）
给它们一个值


$（文档）.ready（函数（）{
var$this=$（'.horizontalbarchart'）；
风险值数据=[{
标签：“Gummi熊”，
价值：20，
},
{
标签：'Butterfinger'，
数值：5，
},
{
标签：“酸补丁儿童”，
数值：30，
},
{
标签：“杏仁乐”，
价值：40，
},
];
变量宽度=$this.data（'width'），
高度=$this.data（'height'）；
var color=d3.scaleOrdinal（）
.范围（[“eb6383”、“fa9191”、“ffe9c5”、“b4f2e1”）；
data.forEach（函数（d）{
d、 总计=+d.值