Question

如何在D3中使用嵌套组作为我的x轴？它是否可能。

我不在我的开发机器上发布我的代码示例，但出于说明目的，我们假设以下代码来自：http://codepen.io/fawyna/pen/VaOmqX

var nest = d3.nest()
    .key(function(d) { return d.sex; })
    .key(function(d){
      var ageGroup = null;
      if (d.age <= 10){
        ageGroup = '0-10';
      } else if (d.age > 10 && d.age <= 20 ){
        ageGroup = '10-20';
      } else if (d.age > 20 && d.age <= 30 ){
        ageGroup = '20-30';
      } else if (d.age > 30 && d.age <= 40 ){
        ageGroup = '30-40';
      } else if (d.age > 40 && d.age <= 50 ){
        ageGroup = '40-50';
      } else if (d.age > 50 && d.age <= 60 ){
        ageGroup = '50-60';
      } else if (d.age > 60 && d.age <= 70 ){
        ageGroup = '60-70';
      } else if (d.age > 70 && d.age <= 80 ){
        ageGroup = '70-80';
      } else if (d.age > 80 && d.age <= 90 ){
        ageGroup = '80-90';
      } else if (d.age > 90 && d.age <= 100 ){
        ageGroup = '90-100';
      }
      return ageGroup;
    })
    .entries(myArray);

我如何使用ageGroup作为我的x轴？

Answer 1

您可以使用分组条形图来显示数据。正如@Cyril所述，您可以使用序数比例来定位轴值和数据。

我创建了一个简单的jsFiddle来展示我的方法。

var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1); // x scale for your ageRanges

var x1 = d3.scale.ordinal(); // Inner x scale for your Male and Female values.

var y = d3.scale.linear().range([height, 0]); // y sale for your count value

var color = d3.scale.ordinal() // set colors for inner x scale
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

这是jsFiddle

https://jsfiddle.net/rnoo6buy/

D3嵌套组为x轴

1 个答案: