Question

我正在使用D3 v4（大多数，如果不是全部的话，那里有v3的例子）。回到第3节，他们有一个名为rangeBand（）的东西，它可以为x轴动态地将所有东西整齐地放在x轴上。

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

我有一个条形图：

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

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

您只需要：

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

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

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

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);

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

1 个答案: