D3 条形图 X 刻度未对齐

D3 bar graph X-ticks not aligning

本文关键字：对齐条形图 D3 更新时间：2023-09-26

我正在使用 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 个项目。使长度相等，您的刻度将对齐。