在 D3 v4 中，如何保持条形的宽度以刻度线为中心？

Question

我正在使用 D3 v4（大多数（如果不是全部）示例都适用于 v3）。 回到 v3，他们有一个叫做 rangeBand() 的东西，它可以为我动态地在 x 轴上整齐地定位所有东西。

现在，在 v4 中，我想知道如何做到这一点。

我有一个条形图：

var barEnter = vis.selectAll("g") 
                  .data(rawdata)
                  .enter()
                  .append('g')
                  .append("rect")
                  .attr("class", "bar")
                  .attr("x", function(d) { return x(d.key); })
                  .attr("y", function(d) { return y(d.value); })   
                  .attr("height", function(d) { return height - y(d.value); })
                  .attr("width", canvas_width / rawdata.length);

这是这个酒吧的宽度，这把我搞砸了。 如果我将它设置为canvas_width / rawdata.length ，它会很好地定位以 x 轴上每个刻度为中心的条形。 问题是所有的条都压在一起，中间没有填充。

因此，很自然地，我尝试执行x.paddingInner(.5) ，它确实添加了一些填充，但现在条形不以刻度线为中心。 使用x.paddingOuter()做任何事情x.paddingOuter()更加混乱。

四处搜索后，我发现rangeBand()是我想要的，但这仅适用于 v3。 在 v4 文档中，没有任何东西看起来像它。 是rangeRound()吗？ 是align()吗？ 我不知道。 如果有人能指出我正确的方向，将不胜感激。

Answer 1

没有看到您的轴代码，我想您正在使用scaleOrdinal() 。 如果是这种情况，您可以更改为scaleBand() ，其中很容易将条形图围绕刻度线居中。

所有你需要的是：

• band.paddingInner([padding]) : 设置条形的内部填充
• band.bandwidth() ：为您提供每个条的带宽。

然后，您使用数据中的相应变量设置x位置，使用bandwidth()设置width 。

这是一个小片段，向您展示它是如何工作的：

 var w = 300, h = 100, padding = 20; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); var data = [{name: "foo", value:50}, {name: "bar", value:80}, {name: "baz", value: 20}]; var xScale = d3.scaleBand() .range([0,w]) .domain(data.map(function(d){ return d.name})) .paddingInner(0.2) .paddingOuter(0.2); var xAxis = d3.axisBottom(xScale); var bars = svg.selectAll(".bars") .data(data) .enter() .append("rect"); bars.attr("x", function(d){ return xScale(d.name)}) .attr("width", xScale.bandwidth()) .attr("y", function(d){ return (h - padding) - d.value}) .attr("height", function(d){ return d.value}) .attr("fill", "teal"); var gX = svg.append("g") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis);

 <script src="https://d3js.org/d3.v4.min.js"></script>