2

我正在 d3.js 中实现堆积条形图。适用于历年城市中各类人群（人群类别）。虽然我在一些参考资料的帮助下取得了一些成果，但我没有得到我想要的确切结果。

我想我在数据映射和过滤功能方面遇到了一些问题，并在颜色域中分配它们。

任何帮助将非常感激。

这是我的代码：-

<!DOCTYPE html>

<meta charset="utf-8">
<style>

body {
font: 10px sans-serif;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.bar {
fill: steelblue;
}

.x.axis path {
display: none;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js">
</script>
<script>


var margin = {
  top: 20, right: 20, bottom: 30, left: 40}
    ,
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    yAxMin_PA = 0,
yAxMax_PA = 1500;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var  y = d3.scale.linear()
   .domain([yAxMin_PA, yAxMax_PA])
   .range([height, 0]);

var color = d3.scale.category20();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

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 data = {
  "bars": [
    {
      "year": 2004,
      "population": [
        {
          "category": 1,
          "strength": 31
        }
        ,
        {
          "category": 2,
          "strength": 21
        }
        ,
        {
          "category": 3,
          "strength": 41
        }
      ]
    }
    ,
    {
      "year": 2005,
      "population": [
        {
          "category": 1,
          "strength": 23
        }
        ,
        {
          "category": 2,
          "strength": 43
        }
        ,
        {
          "category": 3,
          "strength": 33
        }
      ]
    }
    ,
    {
      "year": 2006,
      "population": [
        {
          "category": 1,
          "strength": 29
        }
        ,
        {
          "category": 2,
          "strength": 41
        }
        ,
        {
          "category": 3,
          "strength": 55
        }
        ,
        {
          "category": 4,
          "strength": 69
        }
        ,
        {
          "category": 5,
          "strength": 89
        }
        ,
        {
          "category": 6,
          "strength": 75
        }
      ]
    }
    ,
    {
      "year": 2007,
      "population": [
        {
          "category": 1,
          "strength": 49
        }
        ,
        {
          "category": 2,
          "strength": 43
        }
        ,
        {
          "category": 3,
          "strength": 25
        }
      ]
    }
    ,
    {
      "year": 2008,
      "population": [
        {
          "category": 1,
          "strength": 20 
        }
        ,
        {
          "category": 2,
          "strength": 43
        }
        ,
        {
          "category": 3,
          "strength": 55
        }
      ]
    }
  ]
}
    ;



x.domain(data.bars.map(function(d) {
  return d.year;
}
                      ));

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

for (k = 0; k < data.bars.length; k++) {
var state = svg.append("g")
    .attr("class", "g")
    .attr("transform", function (d) {
        return "translate(" + x(data.bars[k].year) + ",0)";
    });

state.selectAll("rect")
    .data(data.bars[k].population)
    .enter().append("rect")
//.attr("width", x.rangeBand())
.attr("class", "rect_grp" + k)
    .attr("id", function (d, i) {
        return "rect" + i;
    })
    .attr("width", function () {
        return x.rangeBand();
    })
    .attr("y", function (d, i) { /*console.log("hiii");*/
        if (i != 0) {

            var prevHgt = d3.select(".rect_grp" + k + "#rect" + (i - 1)).attr("height"); // Select height of previous rectangle
            var ylimit = d3.select(".rect_grp" + k + "#rect" + (i - 1)).attr("y"); // Select y of previous rectangle
            console.log("prevHgt=>" + prevHgt);

            return ((parseFloat(ylimit)) - (parseFloat(prevHgt)));
        } else {
            return y(d.strength);
        }
    })
    .attr("height", function (d, i) {

        return (Math.round(y(yAxMin_PA)) - Math.round(y(d.strength)));

    })
    .style("fill", function (d, i) {
        console.log(i);
        return color(i);
    });

}

</script>
4

1 回答 1

1

我发现给人们提供示例而不是让他们自己运行它是有用的。见这里：http ://tributary.io/inlet/5835233 。

在第 157 行附近，上面写着

d.population.forEach (function(d){
  color.domain(d3.keys(d).filter(function(name) {
  return name;
}

name总是要么"category"要么"strength"。这是因为您的数据是如何排列的。我认为你想要的是让你的数据成为

{year: 2008, 
population: {
    category1: 20,
    category2: 43,
    category3: 55}
}

如果你像这样放置数据，你将不得不弄乱你如何精确地设置你的color实例的域，因为forEach只适用于数组，我们现在已经将数据设置在一个对象中。类似的东西color.domain(d3.keys(d.population))。在支流上分叉我的例子并尝试一些事情。查看d3.keys()文档以了解它是如何工作的。

于 2013-06-22T00:20:35.823 回答