D3嵌套组作为x轴

D3 nested group as x-axis

本文关键字：嵌套 D3      更新时间：2023-09-26

如何使用D3中的嵌套组作为x轴？有可能吗。

我不在我的开发机器上发布我的代码示例，但为了便于说明，让我们假设以下代码来自：从D3中的列表中形成年龄组的最佳方式是什么？

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轴？

您可以使用分组条形图来显示数据。正如@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/

相关文章：