D3.js d3js-条形图动态比例和轴

我正试图创建一个bart图表来显示这些年来的人口变化

资料

我想在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);

由于数据集中的人口变化很大，例如对于小区域，人口可以在100秒内变化，而一些较大区域的人口可以在100000秒内变化

在这个场景中，构建y比例和轴的最佳方式是什么，静态比例还是动态比例

在x轴上，我如何在每个刻度上显示年份，例如，20002012年

任何指针都会非常有用

---

干杯，

您可以有一个带有日志缩放的堆叠条形图，如这里所建议的：（第二个答案）对于JSFIDLE，这可能也很有帮助。

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);