在d3js柱状图中，我想要固定的条形宽度。

Question

http://bl.ocks.org/d3noob/8952219

我希望柱状图的宽度可以固定不变。

从上面的例子中，我已经修改了代码：

 svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

to

svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", 50)
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

但是标签没有移动到正确的位置，柱形图也出现了重叠。

- yelji

Answer 1

您需要更改x轴的range()，以适应条形图的宽度值：

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

如果您想将条形宽度设置为50像素

var x = d3.scale.ordinal().range([0, data.length * 50]);

range() 方法用于定义您的刻度的显示范围。

- JulCh

Answer 2

我正在寻找类似的解决方案。@JulCh所提供的答案对我来说并不是“开箱即用”，但是它引导了我走向正确的方向。

尝试一下这个：

var x = d3.scale.ordinal()
          .range(d3.range(data.length).map(function (d) { return d * 50; }));

在这里，内部的d3.range创建了一个数组，其中包含由data.length或某个常数确定的元素数量（您想要显示的条形的数量）。

例如：如果data.length或某个常数为8，则[0,1,2,3,4,5,6,7]将从d3.range(8)返回。

map函数然后将您的固定宽度50乘以数组中的每个元素，返回[0,50,100,150,200,250,300,350]。

D3将使用这些确切的值来放置您的条形。

- Mo Gauvin