Добавить больше группировки в сгруппированную гистограмму

Я делаю сгруппированную гистограмму, для которой скрипт приведен по этой ссылке: 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.

Спасибо!


javascript d3.js bar-chart axes
person Yesha    schedule 13.11.2017    source источник
comment
Моя ось X содержит только информацию rank_bucket. Я также хочу добавить информацию о нации. Как показано в скрипке, я рисую только rank_bucket, зарплату, инвестиции. Я хочу сделать это для разных народов   -  person Yesha    schedule 13.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

вы можете создать несколько ScaleBands для rank_bucket, нации и группы.

Для ширины диапазона каждой шкалы используйте каждую пропускную способность() предыдущей шкалы. Например,

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, поэтому вы можете добавить их на основе объединения данных 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. Обновленная скрипта использует наборы для извлечения уникальных значений для каждой шкалы и преобразует наборы в массивы для использования в масштабах и объединениях данных.

person Tom Shanley    schedule 14.11.2017
comment
Идеальный! Большое спасибо :) - person Yesha; 14.11.2017