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

Question

我正在制作一个分组条形图，其脚本在此链接中给出： https://jsfiddle.net/yL5z1q04/4/

在这里，我有 rank_buckets 的“薪水”和“投资”组。现在，我想根据数据中给出的“国家”键在 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。

谢谢！

Answer 1

您可以为 rank_bucket、国家和组创建多个 scaleBand。

对于每个尺度的范围宽度，使用前一个尺度的每个 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 轴。对于国家轴，每个 rank_bucket 都需要一个，因此您可以根据 rank_bucket 数据连接添加它们，例如：

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)

轴可以翻译和设置样式，使其看起来像您的模型。

https://jsfiddle.net/yL5z1q04/5/

PS - 更新后的小提琴使用集合来提取每个比例的唯一值，并将集合转换为数组以用于比例和数据连接。