我正在使用 D3 制作条形图，但是当我绘制条形图时，x 刻度没有在条形下方对齐。我想我没有正确地改变酒吧。我使用了以下示例 http://bost.ocks.org/mike/bar/ 并且我已经能够创建条形图。任何帮助表示赞赏。先感谢您。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [277, 407, 422, 279, 680, 485, 1624, 729, 327, 425, 205, 236];
var margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 480 - margin.left - margin.right,
height = 340 - margin.top - margin.bottom;
var labels = [ {"key": "WS1"},{"key": "WS2"},{"key": "WS3"},{"key": "WS4"},
{"key": "WS5"},{"key": "WS6"},{"key": "WS7"},{"key": "WS8"},
{"key": "WS9"},{"key": "WS10"},{"key": "WS11"},{"key": "WS12"},
{"key": "WS13"}];
var colo = ['rgb(179,205,227)','rgb(140,150,198)','rgb(136,86,167)','rgb(129,15,124)',
'rgb(254,217,142)','rgb(254,153,41)','rgb(217,95,14)','rgb(153,52,4)',
'rgb(251,180,185)','rgb(247,104,161)','rgb(197,27,138)','rgb(122,1,119)']
var y = d3.scale.linear()
.domain([0, d3.max(data)])
.range([height, 0]);
var x = d3.scale.ordinal()
.domain(labels.map(function(d) { return d.key}))
.rangeRoundBands([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var chart = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g");
var barWidth = width / data.length;
console.log(width);
console.log(height);
console.log(data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g");
var ii = 0;
bar.append("rect")
.attr("fill", function(d) { ii += 1; return colo[ii-1]; })
.attr("y", function(d) { return y(d); })
.attr("x", function(d,i) { return x(d.key)})
.attr("width", barWidth - 1)
.attr("height", function(d) { return height - y(d); })
.attr("transform", function(d, i) {
return "translate(" + ((i) * (barWidth)) + ", 0)";
});
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis);
</script>
最佳答案
您的 labels 数组有 13 个元素，但您的 data 数组只有 12 个。使长度相等，您的刻度将排成一行。
关于javascript - D3 条形图 X-ticks 未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27328180/