在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使用数据中的相应变量和widthusing来设置位置bandwidth()。

这是一个小片段，向您展示其工作方式：

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>