Javascript 使用d3.js制作分组条形图

我是d3.js新手，我发现很难创建分组条形图，但我尝试了一些似乎不正确的方法。我想要x轴上的月数和y轴上的组数（火星和木星）。类似dis的东西

var svg=d3.选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var x=d3.scaleBand（）.rangeRound（[0，
宽度），填充（0.1），
y=d3.scaleLinear（）.rangeRound（[height，0]）；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[
{“组”：“火星”，“计数”：10，“月”：“六月”}，
{“组”：“木星”，“计数”：50，“月”：“六月”}，
{“组”：“火星”，“计数”：70，“月”：“七月”}，
{“组”：“木星”，“计数”：60，“月”：“七月”}]；
var ymaxdomain=d3.max（d，函数（d）{返回d.count；}）；
x、 域（d.map（函数（d）{returnd.months}））；
y、 域（[0，ymaxdomain]）；
var x1=d3.scaleBand（）.rangeRound（[0，x.bandwidth（）]）；
域（d.map（函数（d）{returnd.months；}））；
g、 选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“x”，函数（d，i）{console.log（d，i）；return（x（d.months））}
.attr（“y”，函数（d）{返回y（d.count）；}）
.attr（“宽度”，x1.bandwidth（））
.attr（“高度”，函数（d）{返回高度-y（d.count）；}）
g、 附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴”）
.call（d3.axisLeft（y）.ticks（null，“s”））
.append（“文本”）
.attr（“x”，2）
.attr（“y”，y（y.ticks（）.pop（））+0.5）
.attr（“dy”，“0.32em”）
.attr（“填充”、“千”）
.attr（“字体大小”、“粗体”）
.attr（“文本锚定”、“开始”）
.text（“计数”）；

.酒吧{
填充：钢蓝；
笔画：黑色
}

---

要创建分组条形图，必须为x位置设置两个刻度：

var x = d3.scaleBand().rangeRound([0, width])
  .padding(0.1);

var x1 = d3.scaleBand()
  .rangeRound([0, x.bandwidth()])
  .padding(0.05);

然后，使用第一个比例添加组

var groups = g.selectAll(null)
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + x(d.months) + ",0)";
  })

…并且，在每个组中，使用第二个比例附加矩形

以下是演示：

var svg=d3.选择（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var x=d3.scaleBand（）.rangeRound（[0，宽度]）
.填充（0.1），
y=d3.scaleLinear（）.rangeRound（[height，0]）；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
“组”：“火星”，
“计数”：10，
“月份”：“六月”
}, {
“组”：“木星”，
“计数”：50，
“月份”：“六月”
}, {
“组”：“火星”，
“计数”：70，
“月份”：“七月”
}, {
“组”：“木星”，
“计数”：60，
“月份”：“七月”
}];
var ymaxdomain=d3.max（数据，函数（d）{
返回d.count；
});
x、 域（data.map）（函数（d）{
返回d月
}));
y、 域（[0，ymaxdomain]）；
var x1=d3.scaleBand（）
.rangeRound（[0，x.bandwidth（）]））
.填充（0.05）
.domain（data.map）（函数（d）{
返回d组；
}));
color.domain（data.map）（函数（d）{
返回d组；
}));
var groups=g.selectAll（空）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“转换”，函数（d）{
返回“translate（“+x（d.months）+”，0）”；
})
变量条=组。选择全部（空）
.数据（功能（d）{
返回[d]
})
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回x1（d组）
})
.attr（“y”，函数（d）{
返回y（d.count）；
})
.attr（“宽度”，x1.bandwidth（））
.attr（“高度”，功能（d）{
返回高度-y（d计数）；
})
.attr（“填充”，功能（d）{
返回颜色（d组）
})
g、 附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴”）
.call（d3.axisLeft（y）.ticks（null，“s”））
.append（“文本”）
.attr（“x”，2）
.attr（“y”，y（y.ticks（）.pop（））+0.5）
.attr（“dy”，“0.32em”）
.attr（“填充”、“千”）
.attr（“字体大小”、“粗体”）
.attr（“文本锚定”、“开始”）
.text（“计数”）；

.bar{
填充：钢蓝；
笔画：黑色
}

非常感谢您的帮助。非常感谢！：）@Gerardo FurtadoI正在学习d3js。。。。这里调用函数x并传递参数d。。。在var x=..中，您在哪里使用它。。。。。