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

Question

我正在制作一个分组条形图，为此 link 给出了脚本： https://jsfiddle.net/yL5z1q04/4/

这里我有 "salary" 和 "investment" 组 rank_buckets。现在，我想根据数据中给出的 "nation" 键在 X 轴上再添加一层 "grouping"。

我的数据如下：

 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 轴上描绘 "nation" 信息以及 rank_bucket。

谢谢！

Answer 1

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

对于每个比例尺的范围宽度，使用前一个比例尺的每个带宽()。例如，

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

你已经完成了其中的一些，但它只需要扩展到第三级。

此外，您可以为国家和 rank_bucket 创建多个 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 - 更新后的 fiddle 使用集合为每个比例提取唯一值，并将集合转换为数组以用于比例和数据连接。

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

Add more grouping to grouped bar chart

javascript

axes

bar-chart

d3.js