[英]d3 v4 error: “Unexpected value parsing width attribute.” in grouped bar chart
I am trying to create a d3 (version 4) grouped bar chart with my own data, based on Mike Bostock's great example . 我正在根据Mike Bostock的绝佳示例 ,尝试使用自己的数据创建d3(第4版)分组条形图。 I had to change all d3 v3 outdated functions to the new v4 ones (eg
d3.scale.ordinal
-> d3.scaleOrdinal
) but then I got errors relating to the 'width' and 'x' attributes of the rect bars: 我不得不将所有d3 v3过时的函数更改为新的v4函数(例如
d3.scale.ordinal
> d3.scaleOrdinal
),但是随后我得到了与矩形条的'width'和'x'属性有关的错误:
here is the relevant part of the code: 这是代码的相关部分:
var x0 = d3.scaleBand()
.range([0, width])
.round(true);
var x1 = d3.scaleOrdinal();
var y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom()
.scale(x0);
var yAxis = d3.axisLeft()
.scale(y);
var svg = d3.select("body").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.csv("myData.csv", function(error, data) {
if (error) throw error;
var yearNames = d3.keys(data[0]).filter(function(key) { return key !== "Unit"; });
data.forEach(function(d) {
d.years = yearNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Unit; }));
x1.domain(yearNames).range([0, x0.range()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.years, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Population");
var unit = svg.selectAll(".unit")
.data(data)
.enter().append("g")
.attr("class", "unit")
.attr("transform", function(d) { return "translate(" + x0(d.Unit) + ",0)"; });
unit.selectAll("rect")
.data(function(d) { return d.years; })
.enter().append("rect")
.attr("width", x1.range())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
});
and here is the csv data: 这是csv数据:
Unit,2012,2013
Comp,54.13809524,52.25
Edu,20.39642857,18.75
Bus,16.3,18.5
SoW,16.08,7
Pharm,45,59
Agr,150.3,122.51
Soc,105.2,112.72
Nat,264.86,277.73
Hum,61.73174603,52.91
Law,14.5,22.33
Dent,27.5,11.5
Med,149.1,147.33
Vet,15,19
Jew,1,0.25
Bra,2.5,4
Most of your problems come from an incorrect usage of .range()
. 您的大多数问题来自
.range()
的不正确使用。 For example here: 例如这里:
x1.domain(yearNames).range([0, x0.range()]);
and here: 和这里:
.attr("width", x1.range())
.range
return an array, which is not what you want. .range
返回一个数组,这不是您想要的。
Further, you probably don't want x1
to be a scaleOrdinal
but rather a scaleBand
. 此外,您可能不希望
x1
是scaleOrdinal
,而是scaleBand
。 I'd set it up like this: 我会这样设置:
x0.domain(data.map(function(d) {
return d.Unit;
}));
// set a sane bar width
var barWidth = x0.bandwidth() / yearNames.length,
barPadding = barWidth * 0.3;
// set up x1 as a scaleBand with padding
x1.domain(yearNames).range([barPadding , x0.bandwidth() - barPadding]);
y.domain([0, d3.max(data, function(d) {
return d3.max(d.years, function(d) {
return d.value;
});
})]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.