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

您必须更改killer比例的range()，以适应条形宽度值：

to（如果你想要50px作为条宽）

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

var x = d3.scale.ordinal().range([0, data.length * 50]);方法用于定义比例尺的显示空间。

Answer 2

我一直在寻找类似的解决方案。 @JulCh给出的回答对我来说没有开箱即用，但引导我朝着正确的方向前进。

尝试：

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

内部d3.range创建一个数组，其中包含由data.length或某个constant数字确定的元素数量（您希望显示的条数）。

示例：如果data.length或某些constant is 8从[0,1,2,3,4,5,6,7]返回d3.range(8)

然后map函数将50的固定宽度与返回[0,50,100,150,200,250,300,350].

的数组中的每个元素相乘然后，

D3会使用这些确切的值来放置你的酒吧。

在d3js条形图中我希望有固定的条宽

2 个答案: