Javascript d3.js中的简单条形图

我正试图创建一个简单的条形图，根据 以下是我的代码和json文件： statistics.html

var xLPU=d3.scale.ordinal()
.rangeBands([0, width]);
var yLPU=d3.scale.linear()
.range([height,0]);
var xLPUAxis = d3.svg.axis()
    .scale(xLPU)
    .orient("bottom");

var yLPUAxis = d3.svg.axis()
    .scale(yLPU)
    .orient("left");
var LPUdivision=d3.select("#LPU").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 + ")");
d3.json("LPUdivision.json",function(data){
    xLPU.domain(data.map(function(d){return d.lpu;}));
    yLPU.domain([0,d3.max(data, function(d) { return d.amount; })]);
    LPUdivision.append("g")
    .attr("class","x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xLPUAxis);
    LPUdivision.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    LPUdivision.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .attr("class","bar")
    .attr("x",function(d){return xLPU(d.lpu)})
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return yLPU(d.amount); })
    .attr("height", function(d) { return height - yLPU(d.amount); });

LPUdivision.json

[
{"lpu":"lpu1","amount":"20"},
{"lpu":"lpu2","amount":"40"},
{"lpu":"lpu3","amount":"80"},
{"lpu":"lpu4","amount":"10"},
{"lpu":"lpu5","amount":"5"},
{"lpu":"lpu6","amount":"6"}
]

---

由于某些原因，xLPU.rangeBand（）返回无穷大，有人能解释我做错了什么吗？

对于顺序刻度，您需要在设置域后调用

.rangeBands（）

（或

.rangeRoundBands（）

）。调用此函数时，给定的范围将根据域中的元素进行划分——如果尚未设置域，则只有一个频带覆盖无穷远。

在设置

.domain（）

后，需要设置

.rangeBands（）

。如果您感兴趣，有多个使用d3.jsThanx到Lars Kotthof的条形图，现在可以工作了，很奇怪官方的例子是错误的。你可以回答我的问题，我肯定会批准的。