d3.js - 在 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); });

到

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

但是标签没有移动到正确的位置，条形也重叠了

Answer 1

您必须更改 range()您的 x缩放，以适应您的条形宽度值:

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

到(如果你想要 50px 作为条宽)

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

range()方法用于定义比例尺的显示空间。