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

In D3 v4, how do I keep the width of a bar centered around a tick mark?

本文关键字：为中心 v4 D3 何使条      更新时间：2023-09-26

我正在使用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()吗？ 我不确定。 如果有人能指出我正确的方向，将不胜感激。

没有看到轴的代码，我想你使用的是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>

相关文章：