d3js - 条形图动态比例和轴

时间:2014-01-09 13:49:21

标签: d3.js bar-chart

我正在尝试创建一个巴特图来显示多年来的人口变化,

数据

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。

任何指针都会非常有用。

干杯,

0 个答案:

没有答案