javascript - 在 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() 做任何事都会把事情搞得更糟。

四处搜索后，我发现 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>