Javascript d3.js条形图中具有恒定条形宽度的动态数据

我需要在我的网站上放一个d3条形图。那里的数据动态地来自服务器。数据可以非常大，也可以很小。 我在下面提到了代码

当数据动态增加时，如何自动添加滚动条而不是减少滚动条的宽度

同样，如果数据较少，则条形图大小应保持不变

//使用Bostock的边距约定设置svg VarMargin={顶部：20，右侧：160，底部：35，左侧：30}； 变量宽度=960-margin.left-margin.right， 高度=500-margin.top-margin.bottom； var svg=d3.selectbody .appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； /*字符串形式的数据，就像从csv导入时一样*/ 风险值数据=[ {年份：2006，红色：10，麦金托什：15，橘子：9，梨：6}， {年份：2007，红色：12，麦金托什：18，橘子：9，梨：4}， {年份：2008，红色：05，麦金托什：20，橘子：8，梨：2}， {年份：2009，红色：01，麦金托什：15，橘子：5，梨：4}， {年份：2010，红色：02，麦金托什：10，橘子：4，梨：2}， {年份：2011，红色：03，麦金托什：12，橘子：6，梨：3}， {年份：2012，红色：04，麦金托什：15，橘子：8，梨：1}， {年份：2013，红色：06，麦金托什：11，橘子：9，梨：4}， {年份：2014，红色：10，麦金托什：13，橘子：9，梨：5}， {年份：2015，红色：16，麦金托什：19，橘子：6，梨：9}， {年份：2016，红色：19，麦金托什：17，橘子：5，梨：7}， {年份：2017，红色：04，麦金托什：15，橘子：8，梨：1}， {年份：2018，红色：06，麦金托什：11，橘子：9，梨：4}， ]; var parse=d3.time.format%Y.parse； //将数据转换为层 var dataset=d3.layout.stack[redDelicious，mcintosh，oranges，pears].mapfunctionfruit{ return data.mapfunctiond{ 返回{x:parsed.year，y:+d[fruit]}； }; }; //设置x、y和颜色 变量x=d3.scale.ordinal .domaindataset[0].mapfunctiond{return d.x；} .rangeRoundBands[10，宽度-10]，0.02； 变量y=d3.scale.linear .domain[0，d3.maxdataset，函数d{return d3.maxd，函数d{return d.y0+d.y；}；}] .范围[高度，0]； 变量颜色=[b33040，d25c4d，f2b447，d9d574]； //定义和绘制轴 var yAxis=d3.svg.axis 斯卡利先生 奥林特夫特先生 .滴答声5 .tickSize宽度，0，0 .tickFormat函数d{return d}； var xAxis=d3.svg.axis scalex先生 .东方巴顿酒店 .tickFormat3.time.format%Y； svg.appendg .属性类，y轴 .callyAxis； svg.appendg .attrclass，x轴 .attrtransform，translate0，+高度+ .callxAxis； //为每个系列创建组，为每个段创建矩形 var group=svg.selectAllg.cost .数据集 .enter.appendg .等级、成本 .stylefill，function，i{返回颜色[i]；}； var rect=groups.selectAllrect .datafunctiond{return d；} 进来 .appendrect .attrx，函数d{return xd.x；} .attry，函数d{return yd.y0+d.y；} .attrheight，函数d{return yd.y0-yd.y0+d.y；} .attrwidth，x.rangeBand .onmouseover，函数{tooltip.styledisplay，null；} .onmouseout，函数{tooltip.styledisplay，none；} .onmousemove，函数d{ var xPosition=d3.mousethis[0]-15； var yPosition=d3.鼠标此[1]-25； tooltip.attrtransform，translate+xPosition+，+yPosition+； 工具提示。选择text.textd.y； }; //绘制图例 var legend=svg.selectAll.legend .数据颜色 .enter.appendg .职业、传奇 .attrtransform，function，i{返回translate30，+i*19+；}； 图例.appendrect .attrx，宽度-18 .宽度，18 .身高18 .stylefill，function，i{返回colors.slice.reverse[i]；}； 图例.appendtext .attrx，宽度+5 .艾特里，9岁 .attrdy，.35em .styletext锚定，开始 .textfunctiond，i{ 开关i{ 案例0：返回安茹梨； 案例1：返回海军橙子； 案例2：退回麦金托什苹果； 案例3：返回红色美味苹果； } }; //准备工具提示位，初始显示隐藏 var tooltip=svg.appendg .attr类，工具提示 .styledisplay，无； tooltip.appendrect .宽度，30 .身高20 .白色 .不透明度，0.5； tooltip.appendtext .attrx，15岁 .attrdy，1.2米 .styletext定位符，中间 .attr字体大小，12px .字体大小，粗体； svg{ 字体：10px无衬线； 形状渲染：边缘清晰； } .轴线路径， .轴线{ 填充：无； 中风：000； } 路径域{ 中风：无； } .y.勾选线{ 卒中：ddd； } d3.js学习 我创建了一个具有固定宽度和高度的div，并让该div沿着x滚动。将图表svg附加到div中，并根据数据长度调整图表宽度

这是一把小提琴。尝试添加或删除其中的数据点

//使用Bostock的边距约定设置svg var保证金={ 前20名， 右：160， 底数：35， 左：30 }; 变量宽度、高度=300-margin.top-margin.bottom； 风险值数据=[ {年份：2006，红色：10，麦金托什：15，橘子：9，梨：6} ]; //根据数据点的数量计算宽度，并乘以60，以使条形图具有足够的宽度。 宽度=data.length*60-margin.left-margin.right； //如果计算的宽度小于div容器宽度，请将最小宽度设置为700px 如果宽度<$'chartContainer'。宽度{ 宽度=700-边距。左侧-边距。右侧； } var svg=d3.selectchartContainer .appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； /*字符串形式的数据，就像从csv导入时一样*/ var parse=d3.time.format%Y.parse； //将数据转换为层 var dataset=d3.layout.stack[redDelicious，mcintosh，oranges，pears].mapfunctionfruit{ return data.mapfunctiond{ 返回{ x:解析。年， y:+d[水果] }; }; }; //设置x、y和颜色 变量x=d3.scale.ordinal .domaindataset[0]。mapfunctiond{ 返回d.x； } .rangeRoundBands[10，宽度-10]，0.8/data.length； 变量y=d3.scale.linear .domain[0，d3.maxdataset，函数D{ 返回d3.maxd，函数d{ 返回d.y0+d.y； }; }] .范围[高度，0]； 变量颜色=[b33040，d25c4d，f2b447，d9d574]； //定义和绘制轴 var yAxis=d3.svg.axis 斯卡利先生 奥林特夫特先生 .滴答声5 .tickSize宽度，0，0 .滴答声{ 返回d }; var xAxis=d3.svg.axis scalex先生 .东方巴顿酒店 .tickFormat3.time.format%Y； svg.appendg .属性类，y轴 .callyAxis； svg.appendg .attrclass，x轴 .attrtransform，translate0，+高度+ callxAxis先生 //。选择所有“文本”； //为每个系列创建组，为每个段创建矩形 var group=svg.selectAllg.cost .数据集 .enter.appendg .等级、成本 .stylefill，函数，i{ 返回颜色[i]； }; var rect=groups.selectAllrect .datafunctiond{ 返回d； } 进来 .appendrect .attrx，函数d{ 返回xd.x； } .attry，函数d{ 返回yd.y0+d.y； } .attr高度，功能{ 返回yd.y0-yd.y0+d.y； } .attrwidth，x.rangeBand .onmouseover，函数{ tooltip.styledisplay，空； } .onmouseout，函数{ tooltip.styledisplay，无； } .onmousemove，函数d{ var xPosition=d3.mousethis[0]-15； var yPosition=d3.鼠标此[1]-25； tooltip.attrtransform，translate+xPosition+，+yPosition+； 工具提示。选择text.textd.y； }; //绘制图例 var legend=svg.selectAll.legend .数据颜色 .enter.appendg .职业、传奇 .attr转换、函数化、i{ 返回translate30，+i*19+； }; 图例.appendrect .attrx，宽度-18 .宽度，18 .身高18 .stylefill，函数，i{ 返回颜色。切片。反转[i]； }; 图例.appendtext .attrx，宽度+5 .艾特里，9岁 .attrdy，.35em .styletext锚定，开始 .我{ 开关i{ 案例0： 还安茹梨； 案例1： 归还海军橘子； 案例2： 归还麦金托什苹果； 案例3： 返回红色美味的苹果； } }; //准备工具提示位，初始显示隐藏 var tooltip=svg.appendg .attr类，工具提示 .styledisplay，无； tooltip.appendrect .宽度，30 .身高20 .白色 .不透明度，0.5； tooltip.appendtext .attrx，15岁 .attrdy，1.2米 .styletext定位符，中间 .attr字体大小，12px .字体大小，粗体； svg{ 字体：10px无衬线； 形状渲染：边缘清晰； } .轴线路径， .轴线{ 填充：无； 中风：000； } 路径域{ 中风：无； } .y.勾选线{ 卒中：ddd； } d3.js学习

---

谢谢，成功了。但是现在唯一的问题是假设我们只有一个数据点。那么条形图的宽度又太大了。@Madhuri现在请检查更新的提琴。我改变的是，现在条之间的填充也是根据数字或数据点。我现在只保留了一个数据点。你可以添加更多的数据点并尝试。这真是太棒了。非常感谢。。我过去总是被困在这里。。现在明白了！