D3.js 如何减少分组条形图d3js v4中的rect大小

我试图复制此图表，但无法调整矩形的大小

我找到的解决方案是更改图表的宽度大小，但我希望保持相同的宽度，只更改图表中矩形的大小

然后我尝试通过减去每个矩形宽度

.attr（“width”，x1.bandwidth（）-50）

来减小宽度，但是现在矩形之间的空间变大了。

var数据=[{
“州”：“CA”，
“AA”：100，
“BB”：200，
“抄送”：300
}, {
“州”：“TX”，
“AA”：454，
“BB”：344，
“抄送”：250
}];
w=900；
h=500；
var svg=d3.选择（“图表”）.追加（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=w-边距。左侧-边距。右侧，
高度=h-页边距.顶部-页边距.底部，
g=svg
.attr（“宽度”，w）
.attr（“高度”，h）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//组之间的比例间隔：
var x0=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充器（0.1）；
//每组条形图的间距比例：
var x1=d3.scaleBand（）
.填充（0.05）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var z=d3.scaleOrdinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
var keys=d3.keys（数据[0]）切片（1）；
x0.domain（data.map）（函数（d）{
返回d.状态；
}));
x1.域（键）.rangeRound（[0，x0.bandwidth（）]）；
y、 域（[0，d3.max（数据，函数（d））{
返回d3.max（键，功能（键）{
返回d[键]；
});
})]).nice（）；
g、 附加（“g”）
.全选（“g”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”、“条”）
.attr（“转换”，函数（d）{
返回“translate（“+x0（d.State）+”，0）”；
})
.selectAll（“rect”）
.数据（功能（d）{
返回键。映射（函数（键）{
返回{
钥匙：钥匙，
值：d[键]
};
});
})
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回x1（d键）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“宽度”，x1.bandwidth（））
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
.attr（“填充”，功能（d）{
返回z（d键）；
});
g、 附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x0））；
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（“文本锚定”、“开始”）
.文本（“人口”）；
var图例=g.append（“g”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，10）
.attr（“文本锚定”、“结束”）
.全选（“g”）
.data（key.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*20+”）；
});
图例。追加（“rect”）
.attr（“x”，宽度-17）
.attr（“宽度”，15）
.attr（“高度”，15）
.attr（“填充”，z）
.attr（“笔划”，z）
.attr（“笔划宽度”，2）
.打开（“单击”，功能（d）{
更新（d）
});
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9.5）
.attr（“dy”，“0.32em”）
.文本（功能（d）{
返回d；
});
var筛选=[]；
////
////单击即可更新和转换：
////
功能更新（d）{
//
//通过以下方式更新阵列以筛选图表：
//
//添加单击的键（如果未包括）：
if（过滤后的索引of（d）=-1）{
过滤。推（d）；
//如果未选中所有条，则重置：
if（filtered.length==keys.length）filtered=[]；
}
//否则，请将其删除：
否则{
过滤拼接（过滤索引f（d），1）；
}
//
//更新每组（/states）项目的量表：
//
var newKeys=[]；
键。forEach（功能（d）{
if（过滤后的索引of（d）=-1）{
新键。按（d）；
}
})
x1.domain（newkey）.rangeRound（[0，x0.bandwidth（）]）；
y、 域（[0，d3.max（数据，函数（d））{
返回d3.max（键，功能（键）{
if（filtered.indexOf（key）=-1）返回d[key]；
});
})]).nice（）；
//
//筛选出需要隐藏的标注栏：
//
var bar=svg.selectAll（“.bar”）.selectAll（“rect”）
.数据（功能（d）{
返回键。映射（函数（键）{
返回{
钥匙：钥匙，
值：d[键]
};
});
})
棒.过滤器（功能（d）{
返回过滤后的.indexOf（d.key）>-1；
})
.transition（）
.attr（“x”，函数（d）{
return（+d3.select（this.attr）（“x”）+（+d3.select（this.attr）（“width”））/2；
})
.attr（“高度”，0）
.attr（“宽度”，0）
.attr（“y”，函数（d）{
返回高度；
})
.期限（500）；
//
//调整其余的杆：
//
棒.过滤器（功能（d）{
返回过滤后的。indexOf（d.key）=-1；
})
.transition（）
.attr（“x”，函数（d）{
返回x1（d键）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
.attr（“宽度”，x1.bandwidth（））
.attr（“填充”，功能（d）{
返回z（d键）；
})
.期限（500）；
//更新图例：
图例。选择全部（“rect”）
.transition（）
.attr（“填充”，功能（d）{
如果（过滤的长度）{
if（过滤后的索引of（d）=-1）{
返回z（d）；
}否则{
返回“白色”；
}
}否则{
返回z（d）；
}
})
.期限（100）；
}

*{
保证金：0；
填充：0；
边界：0；
}
身体{
背景：#ffd；
}
.axis.domain{
显示：无；
}

---

我不完全明白。如何在不增加钢筋间距的情况下减小钢筋宽度

制作更薄条的简单方法是将

padding

或

paddingner

更改为更大的百分比：

var x1 = d3.scaleBand()
  .padding(0.2);

您引用的图表构成了组之间的空间。因此，改为更改

x0

填充：

var x0 = d3.scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.3);

---

我不完全明白。没有我，你怎么能把栏杆弄得不那么宽