D3.js 垂直条与x轴标签不对齐，最后一条渲染在x轴范围之外-D3 js-固定宽度的简单条
我在设置横杆固定宽度位置时遇到了挑战，该位置与x轴标签的宽度正确对齐 条形图和x记号未正确对齐，最后一个条形图也在最大xscale范围之后渲染 感谢您对解决此问题的帮助 请检查这里的样本-更新和固定版本 函数生成器{ 常数数据=[{ 标签：100， 数值：10 }, { 标签：200， 价值：20 }, { 标签：300， 价值：30 }, { 标签：400， 价值：40 }, { 标签：500， 价值：50 }]; 让边距={top:20，right:20，bottom:70，left:40}， 宽度=600-边距。左侧-边距。右侧， 高度=300-margin.top-margin.bottom； const xScale=d3.scaleLinear.domain[0500]。范围[0，宽度]； const yScale=d3.scaleLinear.domain[0,50]。范围[height，0]； 常数xAxis=d3.x刻度； 常数yAxis=d3.0；左刻度； console.logd3.选择“图表”； 让svg=d3。选择“图表” .appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attrtransform， 翻译+margin.left+，+margin.top+； svg.appendg .attrclass，x轴 .attrtransform，translate0，+高度+ callxAxis先生 。选择全部文本 .styletext锚定，结束 .attrdx，-.8em .attrdy，-.55em .attransform，旋转-90； svg.appendg .属性类，y轴 卡利亚克斯先生 .附录文本 .attransform，旋转-90 .attry，6岁 .attrdy，.71em .styletext锚定，结束 .textValue$； svg.selectAllbar .数据 .enter.appendrect .stylefill，钢蓝 .attrx，函数d{return xScaled.label；} .宽度，15 .attry，函数d{return yScaled.value；} .attrheight，函数{返回高度-yScaled.value；}； } 生成艺术； 您正在使用与x轴相同的比例设置条形图的x值，该值设置条形图的左边缘。因此，表示100的条的左边缘与轴上的100记号对齐是有意义的 为了对齐这些条，需要将它们向左移动一半宽度。您需要将条形宽度设置为偶数，以便使条形很好地匹配D3.js 垂直条与x轴标签不对齐，最后一条渲染在x轴范围之外-D3 js-固定宽度的简单条,d3.js,D3.js,我在设置横杆固定宽度位置时遇到了挑战，该位置与x轴标签的宽度正确对齐 条形图和x记号未正确对齐，最后一个条形图也在最大xscale范围之后渲染 感谢您对解决此问题的帮助 请检查这里的样本-更新和固定版本 函数生成器{ 常数数据=[{ 标签：100， 数值：10 }, { 标签：200， 价值：20 }, { 标签：300， 价值：30 }, { 标签：400， 价值：40 }, { 标签：500， 价值：50 }]; 让边距={top:20，right:20，bottom:70，left:40
const barWidth = 16;
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return xScale(d.label) - (barWidth / 2); })
.attr("width", barWidth)
.attr("y", function(d) { return yScale(d.value); })
.attr("height", function(d) { return height - yScale(d.value); });