我正在尝试根据此示例创建一个简单的条形图。这是我的代码和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()
)。当您调用此函数时,给定范围将根据域中的元素进行划分-如果尚未设置域,那么您将发现只有一个频带覆盖无穷大。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句