Javascript 向分组条形图添加更多分组

我正在制作一个分组条形图，其脚本在以下链接中给出：

在这里，我有一组“工资”和“投资”的排名。现在，我想根据数据中给出的“国家”键在X轴上再添加一级“分组”

我的数据如下：

 var data = [
    {group: "investment", height: 84636, rank_bucket: "a", nation: "United States"},
    {group: "salary", height: 76536, rank_bucket: "a", nation: "United States"},
    {group: "investment", height: 84636, rank_bucket: "a", nation: "Australia"},
    {group: "salary", height: 76536, rank_bucket: "a", nation: "Australia"},
    {group: "investment", height: 89626, rank_bucket: "b", nation: "Australia"},
    {group: "salary", height: 98234, rank_bucket: "b", nation: "Australia"},
    {group: "investment", height: 89626, rank_bucket: "b", nation: "United States"},
    {group: "salary", height: 98234, rank_bucket: "b", nation: "United States"}

   ];

预期的输出应该是这样的：

我该怎么做？我想在X轴上描绘“国家”信息以及排名

---

谢谢

您可以为rank_bucket、nation和group创建多个比例尺

对于每个刻度的范围宽度，使用前面刻度的each bandwidth（）。比如说,

var xscale_rank_bucket = d3.scaleBand()
          .rangeRound([0,width])
          .padding(0.2)
          .domain(Array.from(rank_buckets));

var xscale_nation = d3.scaleBand()
          .rangeRound([0,xscale_rank_bucket.bandwidth()])
          .padding(0.1)
          .domain(Array.from(nations));

你已经做了一些，但它只需要扩展到第三级

此外，您还可以为国家和排名创建多个x轴。对于国家坐标轴，每个秩_桶需要一个坐标轴，因此可以根据秩_桶数据联接添加坐标轴，例如：

var axisNationG = axes.selectAll(".axis-nation")
        .data(Array.from(rank_buckets))
      .enter()
      .append("g")
      .attr("transform", function(d){
        return "translate(" + xscale_rank_bucket(d) + ",0)"
      })
      .attr("class", "x axis")
      .call(axisNation)

轴可以进行平移和样式设置，使其看起来像您的模型

---

PS-更新后的fiddle使用集合来提取每个刻度的唯一值，并将集合转换为数组，以便在刻度和数据联接中使用。

My X轴仅包含秩和桶信息。我还想添加国家信息。就像小提琴上显示的那样，我只在画排名、薪水和投资。我想为不同的国家做这件事完美！非常感谢：）