Javascript 如何使D3水平条形图工作？

最近我开始学习D3.JSV5，我必须制作不同种类的图形。其中一个图形是堆叠水平条形图。我在Udemy中学习了一个教程，但我无法使这个图表正常工作

有人能帮我吗

所以，我知道d3使用堆栈生成器生成堆栈条形图。我使用它并检查控制台中的值。看起来数据的格式很好，可以开始生成堆叠条形图，但我似乎不明白为什么它不起作用

var-Margin={顶部：30，右侧：20，底部：40，左侧：110}；
var InnerWidth=432-Margin.left-Margin.right；
var InnerHeight=432-Margin.top-Margin.bottom；
var diff_variant=[{错义突变：5，沉默：4，剪接位点：0}，
{错义突变：8，剪接位点：0，沉默：0}，
{剪接位点：4，错义突变：4，沉默：0}，
{错义_突变：4，沉默：1，剪接_位点：0}，
{错义突变：5，剪接位点：0，沉默：0}，
{错义突变：5，剪接位点：0，沉默：0}，
{错义突变：4，剪接位点：0，沉默：0}，
{错义突变：4，剪接位点：0，沉默：0}，
{沉默：1，错义突变：1，剪接位点：0}，
{错义_突变：1，剪接_位点：0，沉默：0}]；
var data1=[{name:“错义突变”，计数：41}，
{姓名：“沉默”，计数：6}，
{名称：“拼接_站点”，计数：4}]；
var variant_name=[“错义突变”、“剪接位点”、“沉默”]；
var stack=d3.stack（）.keys（变量名称）；
var x=d3.scaleLinear（）
.domain（[0，d3.max（data1，函数（d）{返回d.count；}）]）
.范围（[0，内部宽度]）；
变量x_轴=d3.scaleLinear（）
.domain（[0，d3.max（data1，函数（d）{返回d.count；}）]）
.范围（[0，内部宽度]）；
变量y_轴=d3.scaleLinear（）
.domain（[0，data1.length]）
.范围（[0，内部宽度]）；
变量y=d3.scaleBand（）
.domain（data1.map（函数（d）{return d.name；}））
.rangeRound（[0，内部高度]）
.填充（0.1）；
var svg5=d3.选择（“正文”）.追加（“svg”）
.attr（“保存Aspectratio”、“xMinYMin满足”）
.attr（“viewBox”`0${InnerWidth+Margin.left+Margin.right}${InnerHeight+Margin.top+Margin.bottom}`）
.style（“背景”、“浅蓝色”）
.附加（“g”）
.attr（“转换”、“平移”（+Margin.left+）、“+Margin.top+”）；
svg5.append（“g”）.style（“font”，“12px sans”）.call（d3.axisLeft（y））；
svg5.append（“g”）.attr（'transform'，'translate（0，${InnerHeight}）`）.style（“font”，“12px times”）.call（d3.axisBottom（x_轴））；
var series=svg5.选择全部（“g”）.数据（堆栈（差异变量））
.enter（）.append（“g”）
.style（“填充”，（d，i）=>d3.schemeSet3[i]）；
series.selectAll（“rect”）.data（函数（d）{return d；}）
.enter（）.append（“rect”）
.attr（“高度”，25）
.attr（“宽度”，函数（d）{返回x（d[1]）-x（d[0]）；}）
.attr（“x”，函数（d）{返回x（d[0]）；}）
.attr（“y”，函数（d，i）{返回i*40；}）；

执行此操作时

var series = svg5.selectAll("g")//etc...

。。。您正在选择SVG中已经存在的

元素（两个轴）并将数据绑定到它们。这就是为什么您的输入选择是空的

您可以选择

null

（了解更多信息）：

或者，您可以按类进行选择，稍后在“输入选择”中进行设置：

var series = svg5.selectAll(".foo")

但是，最好的解决方案是将轴组移动到底部：这不仅可以解决问题，还可以在矩形上方绘制轴

以下是更改后的代码：

var保证金={
前30名，
右:20,，
底数：40，
左：110
};
var InnerWidth=432-Margin.left-Margin.right；
var InnerHeight=432-Margin.top-Margin.bottom；
变量差异_变量=[{
错义突变：5，
沉默：4，
拼接位置：0
},
{
错义突变：8，
拼接位置：0，
无声：0
},
{
拼接位置：4，
错义突变：4，
无声：0
},
{
错义突变：4，
沉默：1，
拼接位置：0
},
{
错义突变：5，
拼接位置：0，
无声：0
},
{
错义突变：5，
拼接位置：0，
无声：0
},
{
错义突变：4，
拼接位置：0，
无声：0
},
{
错义突变：4，
拼接位置：0，
无声：0
},
{
沉默：1，
错义突变：1，
拼接位置：0
},
{
错义突变：1，
拼接位置：0，
无声：0
}
];
变量数据1=[{
名称：“错义突变”，
计数：41
},
{
姓名：“沉默”，
计数：6
},
{
名称：“拼接_站点”，
计数：4
}
];
var variant_name=[“错义突变”、“剪接位点”、“沉默”]；
var stack=d3.stack（）.keys（变量名称）；
var x=d3.scaleLinear（）
.domain（[0，d3.max（数据1，函数（d））{
返回d.count；
})])
.范围（[0，内部宽度]）；
变量x_轴=d3.scaleLinear（）
.domain（[0，d3.max（数据1，函数（d））{
返回d.count；
})])
.范围（[0，内部宽度]）；
变量y_轴=d3.scaleLinear（）
.domain（[0，data1.length]）
.范围（[0，内部宽度]）；
变量y=d3.scaleBand（）
.domain（数据1.map）函数（d）{
返回d.name；
}))
.rangeRound（[0，内部高度]）
.填充（0.1）；
var svg5=d3.选择（“正文”）.追加（“svg”）
.attr（“保存Aspectratio”、“xMinYMin满足”）
.attr（“viewBox”`0${InnerWidth+Margin.left+Margin.right}${InnerHeight+Margin.top+Margin.bottom}`）
.style（“背景”、“浅蓝色”）
.app
var series = svg5.selectAll(".foo")