轴未与条对齐

Question

我有这个 d3 代码，但我无法将条形图与 x 轴对齐。我希望代表一个小时（范围 0h-23h）的数字出现在小时数的中间，即 y 值。

变量 times 被实例化为 24 个值（索引 0 到 23 h）。欢迎任何回应或想法。现在的样子；

http://i.imgur.com/PLu7Uv2.png?1

var times = buildTimeTable(data);
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 500- margin.left - margin.right, height = 200- margin.top - margin.bottom;
var x = d3.scale.linear().domain([0, 23]).range([0, width]);
var y = d3.scale.linear().domain([0, Math.max.apply(Math, times)]).range([height, 0]);
var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(24);
var yAxis = d3.svg.axis().orient("left").scale(y);
d3.select("#statistics-hours > svg").remove();
var svg = d3.select("#statistics-hours").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");;
var bar = svg.selectAll(".bar").data(times).enter().append("rect")
.attr("class", "bar")
.attr("width", (width)/times.length - 5)
.attr("height", function(d){return height - y(d);})
.attr("x", function(d, i){return i * (width/times.length);})
.attr("y", function(d){return y(d);})
.attr("fill", "steelblue");
svg.append("g").attr("class", "axis").attr("transform", "translate("+ margin.left +"," + (height) + ")").call(xAxis);
svg.append("g").attr("class", "axis").attr("transform", "translate(" + (margin.left) + ",0)").call(yAxis);

Answer 1

您可能要考虑使用序数尺度。

var x = d3.scale.ordinal().domain(d3.range[0,24]).rangeRoundBands([0,width],.1)

现在，x 只是

.attr('x',function(d){return x(d);})

而且宽度正好...

.attr('width',function(d){return x.rangeBand();})

轴未与条对齐

Axis not ligning up to bars

javascript

graph

bar-chart

d3.js