Question

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

变量times用24个值（索引0到23小时）实例化。欢迎任何回应或想法。它现在看起来像什么;

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（＆＃39; x＆＃39;，function（d）{return x（d）;}）

宽度只是......

.attr（＆＃39; width＆＃39;，function（d）{return x.rangeBand（）;}）

轴没有排到酒吧

1 个答案: