Reactjs 如何确保D3水平条形图适合div？

我正在使用ReactJS应用程序中的D3创建一个水平条形图。我遇到的问题是酒吧太长，被切断了。我如何按比例缩小条形图

---

感谢您的建议。

如果您想适合您的图表，则需要更改显示图表的容器的宽度/高度（请参阅下面代码中的

）。通常，条的最大高度或宽度不得超过相应容器的尺寸大小，所以代码中可能存在错误。如果你能分享你的代码，那会很有帮助

这里我提供了一个正确缩放的水平条形图示例（原文：）：

var数据=[{“销售员”：“鲍勃”，“销售员”：“罗宾”，“销售员”：“罗宾”，“销售员”：12}，{“销售员”：“安妮”，“销售员”：41}，{“销售员”：“马克”，“销售员”：16}，{“销售员”：“乔”，“销售员”：159}，{“销售员”：“夏娃”，“销售员”：38}，{“销售员”：“卡伦”，“销售员”：21}，{“销售员”：“科斯蒂，“销售”：47}，{“销售员”：“汤姆”，“销售”：5}，{“销售员”：“斯泰西”，“销售”：20}，{“销售员”：“查尔斯”，“销售”：13}，{“销售员”：“玛丽”，“销售”：29}；
//设置图形的尺寸和边距
变量
svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：60}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
//设定范围
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
svg=svg
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//格式化数据
data.forEach（函数（d）{
d、 销售额=+d.销售额；
});
//缩放域中数据的范围
x、 域（[0，d3.max（数据，函数（d）{return d.sales；}）]）
y、 域（data.map（函数（d）{returnd.salessorn；}））；
//y、 域（[0，d3.max（数据，函数（d）{return d.sales；}）]）；
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
//.attr（“x”，函数（d）{return x（d.sales）；}）
.attr（“宽度”，函数（d）{return x（d.sales）；}）
.attr（“y”，函数（d）{返回y（d.salesperson）；}）
.attr（“高度”，y.带宽（））；
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
svg.append（“g”）
.call（d3.axisLeft（y））；

.bar{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.轴--x路径{
显示：无；
}