Question

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

我尝试更改以下代码行：

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

这成功地减小了条的宽度，但是通过减小图的整体尺寸来实现。

此外，我尝试在以下代码中更改height属性：

 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

Answer 1

padding就在那里，使用它：

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

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

D3.js条形图 - 使用自定义条宽

1 个答案: