我正在尝试创建一个巴特图来显示多年来的人口变化,
数据
popluation :[141674,142449,142928,142827,142928,143393,144485,145884,147663,148473,148901,149031]
我想在y轴和x轴年显示人口。我无法解决最新的方法。
这是我到目前为止所拥有的,
的javascript:
var padding = 30;
var margin = {top: 10, left: 10, bottom: 10, right: 10};
var chartContainer = d3.select(".chartSvg");
var chartContainerWidth = parseInt(chartContainer.style("width"));
var chartContainerHeight = parseInt(chartContainer.style("height"));
var chartmapAspect = chartContainerWidth/chartContainerHeight;
chartSvg.attr("viewBox", "0 0 " + chartContainerWidth + " " + chartContainerHeight)
.attr("preservemapAspectRatio", "xMinYMin");
var chart = chartContainer.selectAll("rect").data(population);
var xScale = d3.scale.ordinal()
.domain(d3.range(population.length))
.rangeRoundBands([padding, chartContainerWidth - padding], 0.05);
var yScale = d3.scale.linear().domain(d3.extent(population))
.range([chartContainerHeight - padding, padding]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(population.lenght);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
console.log("popluation : " + population);
//Create bars
chart.enter()
.append("rect")
.transition()
.delay(function(d, i) {
return i / population.length * 1000;
})
.duration(100)
.attr("x", function(d,i) {
return xScale(i);
})
.attr("y", function(d) {
return yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return chartContainerHeight - yScale(d) - padding;
})
.style("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create X axis
chartContainer.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (chartContainerHeight - padding) + ")")
.call(xAxis);
//Create Y axis
chartContainer.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
由于数据集中的人口变化很大,例如小区域,人口可以在100s,而一些较大的区域可以有10万人口。
在这种情况下,构建y比例和轴的最佳方法是什么,静态与动态比例?
在x轴上如何显示年份,例如每个刻度线上的2000,2012。
任何指针都会非常有用。
干杯,