【发布时间】：2017-09-07 22:32:19
【问题描述】：
我正在尝试为收入范围中断创建一个直方图，并在每个中断中包含计数。我从一个基本的直方图块中选择了这个例子。下面是这个的代码。如何生成直方图以在 x 轴上显示收入范围并在 y 上计数。
https://jsfiddle.net/snt1/cLu6f1nb/6/
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;
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 + ")");
// Get the data
var all = [{
"name": "Home Value",
"code": "HOME_VALUE",
"children": [{
"name": "Housing Value Under $10,000",
"code": "Q084002",
"count": 78
}, {
"name": "Housing Value $10,000 to $14,999",
"code": "Q084003",
"count": 73
}, {
"name": "Housing Value $15,000 to $19,999",
"code": "Q084004",
"count": 30
}, {
"name": "Housing Value $20,000 to $25,000",
"code": "Q084005",
"count": 60
}, {
"name": "Housing Value $25,000 to $29,999",
"code": "Q084006",
"count": 40
}, {
"name": "Housing Value $30,000 to $34,999",
"code": "Q084007",
"count": 21
}, {
"name": "Housing Value $35,000 to $39,999",
"code": "Q084008",
"count": 8
}, {
"name": "Housing Value $40,000 to $49,999",
"code": "Q084009",
"count": 44
}, {
"name": "Housing Value $50,000 to $59,999",
"code": "Q084010",
"count": 85
}, {
"name": "Housing Value $60,000 to $69,999",
"code": "Q084011",
"count": 93
}, {
"name": "Housing Value $70,000 to $79,999",
"code": "Q084012",
"count": 208
}, {
"name": "Housing Value $80,000 to $89,999",
"code": "Q084013",
"count": 231
}, {
"name": "Housing Value $90,000 to $99,999",
"code": "Q084014",
"count": 419
}, {
"name": "Housing Value $100,000 to $124,999",
"code": "Q084015",
"count": 1491
}, {
"name": "Housing Value $125,000 to $149,999",
"code": "Q084016",
"count": 1135
}, {
"name": "Housing Value $150,000 to $174,999",
"code": "Q084017",
"count": 866
}, {
"name": "Housing Value $175,000 to $199,999",
"code": "Q084018",
"count": 472
}, {
"name": "Housing Value $200,000 to $249,999",
"code": "Q084019",
"count": 654
}, {
"name": "Housing Value $250,000 to $299,999",
"code": "Q084020",
"count": 536
}, {
"name": "Housing Value $300,000 to $399,999",
"code": "Q084021",
"count": 409
}, {
"name": "Housing Value $400,000 to $499,999",
"code": "Q084022",
"count": 145
}, {
"name": "Housing Value $500,000 to $749,999",
"code": "Q084023",
"count": 147
}, {
"name": "Housing Value $750,000 to $999,999",
"code": "Q084024",
"count": 128
}]
}]
var data = all[0].children;
data.forEach(function(d) {
d.name = +d.name;
d.count = +d.count;
});
var x = d3.scaleLinear()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.domain([0, d3.max(bins, function(d) {
return d.count;
})])
.range([height, 0]);
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 + ")");
var x = d3.scaleLinear()
.rangeRound([0, width]);
var bins = d3.histogram()
.domain(x.domain())
.thresholds(x.ticks(20))
(data);
var y = d3.scaleLinear()
.domain([0, d3.max(bins, function(d) {
return d.count;
})])
.range([height, 0]);
// Coerce types.
data.forEach(function(bin) {
bin.name = +bin.name;
bin.count = +bin.count;
});
// Normalize each bin to so that height = quantity/width;
// see http://en.wikipedia.org/wiki/Histogram#Examples
for (var i = 1, n = bins.length, bin; i < n; i++) {
bin = bins[i];
bin.offset = bins[i - 1].name;
bin.width = bin.name - bin.offset;
bin.height = bin.count / bin.width;
}
// Drop the first bin, since it's incorporated into the next.
bins.shift();
// Set the scale domain.
x.domain([0, d3.max(bins.map(function(d) {
return d.offset + d.width;
}))]);
y.domain([0, d3.max(bins.map(function(d) {
return d.height;
}))]);
// Add the bins.
svg.selectAll(".bin")
.data(data)
.enter().append("rect")
.attr("class", "bin")
.attr("x", function(d) {
return x(d.offset);
})
.attr("width", function(d) {
return x(d.width) - 1;
})
.attr("y", function(d) {
return y(d.height);
})
.attr("height", function(d) {
return height - y(d.height);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom"));
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis()
.scale(y)
.orient("left"));<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>
<body></body>【问题讨论】：