D3.js 条形图 - 将标签与自定义条形宽度对齐答案

【问题标题】：D3.js Bar chart - Aligning labels with custom bar widthD3.js 条形图 - 将标签与自定义条形宽度对齐
【发布时间】：2016-11-17 09:58:41
【问题描述】：

我正在尝试创建一个显示动态数据的条形图，这意味着加载时可能有 1-10 个条形图。默认情况下，标签正确对齐到每个条的中心。但是，对于我的条形图，我需要缩短每个条形的宽度。

我已尝试更改以下代码行：

height = 200 - margin.top - margin.bottom;

这成功地减小了条形的宽度，但这样做是通过减小图形的整体大小来实现的。

另外，我尝试在以下代码中更改高度属性：

 svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("width", function(d) {return x(d.value); } )
    .attr("y", function(d) { return y(d.label); })
    .attr("height", y.bandwidth())

这成功地调整了栏的大小，但将标签移出了对齐方式。

谁能帮我在给定自定义宽度时让标签自动重新对齐到条的中心？我附上了一个指向 JSFiddle 的链接，以帮助可视化我的问题。

JSFiddle

【问题讨论】：

标签： d3.js

【解决方案1】：

padding 就在那里，使用它：

var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.4);//tweak this value here

这是您更新的小提琴，填充为 0.4：https://jsfiddle.net/xLfdft2f/

【讨论】：