Сортировка гистограммы по убыванию - PullRequest
Новая
       36

Сортировка гистограммы по убыванию

0 голосов
/ 02 октября 2019

У меня проблемы с получением этой гистограммы для сортировки по длине столбцов в порядке убывания и для правильного масштабирования оси X с доменом. Я жестко закодировал домен на основе наибольшего значения счетчика. Количество не нужно агрегировать, потому что в каждом штате существует только одна строка в год. Для домена я попытался: 

.domain([0, d3.max(data, function(d){
            return d.count;
        })])

Но он не работал со свойством, но работал на большинстве других моих диаграмм.

Вот код для диаграммы: 

     var barRegion = "West";

     var y = d3.scaleBand()
                .range([h, 0])
                .padding(0.1);

      var x = d3.scaleLinear()
                .range([0, w]);

      var svg1 = d3.select("body").append("svg")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .append("g")
        .attr("transform", 
        "translate(" + margin.left + "," + margin.top + ")");

      x.domain([0, 1500]) // NEED DYNAMIC
      y.domain(dataset.map(function(d) {
        //console.log(barRegion)
        //console.log(d)
        if(d.region === barRegion && d.year === "2011"){
          return d.state;
        }
     }));


  // append the rectangles for the bar chart
  svg1.selectAll(".bar")
      .data(dataset)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("width", function(d) {
                        if(d.region === barRegion && d.year === "2011"){
                          //console.log(d.count)

          return x(d.count); 
        }

      } )
      .attr("y", function(d) {
                if(d.region === barRegion && d.year === "2012"){
          return y(d.state); 
        }

      // return y(d.state); 
     })
      .attr("height", y.bandwidth());

  // add the x Axis
  svg1.append("g")
      .attr("transform", "translate(0," + h + ")")
      .call(d3.axisBottom(x));

  // add the y Axis
  svg1.append("g")
      .call(d3.axisLeft(y));

данные считываются так: 

      d3.csv("data.csv").then(function(dataset){


      dataset.forEach(function(d) {
        d.date = parseTime(d.year);
        d.region = d['region'];
        d.state = d['state'];
        d.count = d['count'];
        //console.log(d)
      });

data.csv 

state,region,year,count
Alabama,South,2010,1
Alabama,South,2011,1
Alabama,South,2012,0
Alabama,South,2013,0
Alabama,South,2014,2
Alabama,South,2015,6
Alaska,West,2010,2245
Alaska,West,2011,1409
Alaska,West,2012,1166
Alaska,West,2013,1329
Alaska,West,2014,1296
Alaska,West,2015,1575
Arizona,West,2010,6
Arizona,West,2011,7
Arizona,West,2012,4
Arizona,West,2013,3
Arizona,West,2014,31
Arizona,West,2015,10
Arkansas,South,2010,15
Arkansas,South,2011,44
Arkansas,South,2012,4
Arkansas,South,2013,4
Arkansas,South,2014,1
Arkansas,South,2015,0
California,West,2010,546
California,West,2011,195
California,West,2012,243
California,West,2013,240
California,West,2014,191
California,West,2015,130
Colorado,West,2010,4
Colorado,West,2011,23
Colorado,West,2012,7
Colorado,West,2013,2
Colorado,West,2014,13
Colorado,West,2015,7
Connecticut,Northeast,2010,0
Connecticut,Northeast,2011,0
Connecticut,Northeast,2012,0
Connecticut,Northeast,2013,0
Connecticut,Northeast,2014,0
Connecticut,Northeast,2015,1
Delaware,South,2010,0
Delaware,South,2011,0
Delaware,South,2012,0
Delaware,South,2013,0
Delaware,South,2014,0
Delaware,South,2015,0
Florida,South,2010,0
Florida,South,2011,0
Florida,South,2012,0
Florida,South,2013,0
Florida,South,2014,0
Florida,South,2015,0
Georgia,South,2010,0
Georgia,South,2011,0
Georgia,South,2012,0
Georgia,South,2013,0
Georgia,South,2014,0
Georgia,South,2015,0
Hawaii,West,2010,17
Hawaii,West,2011,34
Hawaii,West,2012,40
Hawaii,West,2013,30
Hawaii,West,2014,26
Hawaii,West,2015,53
Idaho,West,2010,7
Idaho,West,2011,4
Idaho,West,2012,4
Idaho,West,2013,11
Idaho,West,2014,31
Idaho,West,2015,38
Illinois,Midwest,2010,1
Illinois,Midwest,2011,0
Illinois,Midwest,2012,2
Illinois,Midwest,2013,1
Illinois,Midwest,2014,0
Illinois,Midwest,2015,1
Indiana,Midwest,2010,1
Indiana,Midwest,2011,0
Indiana,Midwest,2012,3
Indiana,Midwest,2013,0
Indiana,Midwest,2014,0
Indiana,Midwest,2015,0
Iowa,Midwest,2010,0
Iowa,Midwest,2011,0
Iowa,Midwest,2012,0
Iowa,Midwest,2013,0
Iowa,Midwest,2014,0
Iowa,Midwest,2015,0
Kansas,Midwest,2010,0
Kansas,Midwest,2011,0
Kansas,Midwest,2012,0
Kansas,Midwest,2013,2
Kansas,Midwest,2014,42
Kansas,Midwest,2015,60
Kentucky,South,2010,0
Kentucky,South,2011,0
Kentucky,South,2012,2
Kentucky,South,2013,0
Kentucky,South,2014,0
Kentucky,South,2015,0
Louisiana,South,2010,1
Louisiana,South,2011,0
Louisiana,South,2012,0
Louisiana,South,2013,0
Louisiana,South,2014,0
Louisiana,South,2015,0
Maine,Northeast,2010,1
Maine,Northeast,2011,0
Maine,Northeast,2012,1
Maine,Northeast,2013,1
Maine,Northeast,2014,0
Maine,Northeast,2015,0
Maryland,South,2010,1
Maryland,South,2011,0
Maryland,South,2012,0
Maryland,South,2013,0
Maryland,South,2014,0
Maryland,South,2015,0
Massachusetts,Northeast,2010,0
Massachusetts,Northeast,2011,0
Massachusetts,Northeast,2012,0
Massachusetts,Northeast,2013,0
Massachusetts,Northeast,2014,0
Massachusetts,Northeast,2015,0
Michigan,Midwest,2010,0
Michigan,Midwest,2011,0
Michigan,Midwest,2012,0
Michigan,Midwest,2013,0
Michigan,Midwest,2014,0
Michigan,Midwest,2015,2
Minnesota,Midwest,2010,0
Minnesota,Midwest,2011,0
Minnesota,Midwest,2012,0
Minnesota,Midwest,2013,0
Minnesota,Midwest,2014,1
Minnesota,Midwest,2015,0
Mississippi,South,2010,0
Mississippi,South,2011,0
Mississippi,South,2012,0
Mississippi,South,2013,0
Mississippi,South,2014,0
Mississippi,South,2015,3
Missouri,Midwest,2010,2
Missouri,Midwest,2011,3
Missouri,Midwest,2012,2
Missouri,Midwest,2013,0
Missouri,Midwest,2014,1
Missouri,Midwest,2015,5
Montana,West,2010,7
Montana,West,2011,11
Montana,West,2012,9
Montana,West,2013,14
Montana,West,2014,29
Montana,West,2015,19
Nebraska,Midwest,2010,2
Nebraska,Midwest,2011,0
Nebraska,Midwest,2012,1
Nebraska,Midwest,2013,0
Nebraska,Midwest,2014,0
Nebraska,Midwest,2015,3
Nevada,West,2010,38
Nevada,West,2011,86
Nevada,West,2012,22
Nevada,West,2013,34
Nevada,West,2014,161
Nevada,West,2015,172
New Hampshire,Northeast,2010,1
New Hampshire,Northeast,2011,0
New Hampshire,Northeast,2012,0
New Hampshire,Northeast,2013,0
New Hampshire,Northeast,2014,0
New Hampshire,Northeast,2015,0
New Jersey,Northeast,2010,0
New Jersey,Northeast,2011,0
New Jersey,Northeast,2012,0
New Jersey,Northeast,2013,0
New Jersey,Northeast,2014,0
New Jersey,Northeast,2015,0
New Mexico,West,2010,7
New Mexico,West,2011,7
New Mexico,West,2012,3
New Mexico,West,2013,6
New Mexico,West,2014,3
New Mexico,West,2015,12
New York,Northeast,2010,0
New York,Northeast,2011,1
New York,Northeast,2012,0
New York,Northeast,2013,0
New York,Northeast,2014,0
New York,Northeast,2015,2
North Carolina,South,2010,0
North Carolina,South,2011,0
North Carolina,South,2012,0
North Carolina,South,2013,0
North Carolina,South,2014,1
North Carolina,South,2015,0
North Dakota,Midwest,2010,0
North Dakota,Midwest,2011,0
North Dakota,Midwest,2012,1
North Dakota,Midwest,2013,0
North Dakota,Midwest,2014,0
North Dakota,Midwest,2015,0
Ohio,Midwest,2010,1
Ohio,Midwest,2011,3
Ohio,Midwest,2012,0
Ohio,Midwest,2013,1
Ohio,Midwest,2014,1
Ohio,Midwest,2015,0
Oklahoma,South,2010,41
Oklahoma,South,2011,63
Oklahoma,South,2012,34
Oklahoma,South,2013,103
Oklahoma,South,2014,585
Oklahoma,South,2015,888
Oregon,West,2010,4
Oregon,West,2011,0
Oregon,West,2012,4
Oregon,West,2013,2
Oregon,West,2014,4
Oregon,West,2015,3
Pennsylvania,Northeast,2010,0
Pennsylvania,Northeast,2011,0
Pennsylvania,Northeast,2012,0
Pennsylvania,Northeast,2013,0
Pennsylvania,Northeast,2014,0
Pennsylvania,Northeast,2015,0
Rhode Island,Northeast,2010,0
Rhode Island,Northeast,2011,0
Rhode Island,Northeast,2012,0
Rhode Island,Northeast,2013,0
Rhode Island,Northeast,2014,0
Rhode Island,Northeast,2015,0
South Carolina,South,2010,0
South Carolina,South,2011,0
South Carolina,South,2012,0
South Carolina,South,2013,0
South Carolina,South,2014,3
South Carolina,South,2015,0
South Dakota,Midwest,2010,0
South Dakota,Midwest,2011,3
South Dakota,Midwest,2012,1
South Dakota,Midwest,2013,1
South Dakota,Midwest,2014,1
South Dakota,Midwest,2015,0
Tennessee,South,2010,1
Tennessee,South,2011,0
Tennessee,South,2012,4
Tennessee,South,2013,1
Tennessee,South,2014,1
Tennessee,South,2015,1
Texas,South,2010,9
Texas,South,2011,18
Texas,South,2012,11
Texas,South,2013,16
Texas,South,2014,8
Texas,South,2015,21
Utah,West,2010,17
Utah,West,2011,16
Utah,West,2012,16
Utah,West,2013,6
Utah,West,2014,10
Utah,West,2015,4
Vermont,Northeast,2010,0
Vermont,Northeast,2011,0
Vermont,Northeast,2012,0
Vermont,Northeast,2013,0
Vermont,Northeast,2014,0
Vermont,Northeast,2015,0
Virginia,South,2010,1
Virginia,South,2011,7
Virginia,South,2012,4
Virginia,South,2013,0
Virginia,South,2014,1
Virginia,South,2015,0
Washington,West,2010,5
Washington,West,2011,14
Washington,West,2012,6
Washington,West,2013,18
Washington,West,2014,6
Washington,West,2015,11
West Virginia,South,2010,1
West Virginia,South,2011,0
West Virginia,South,2012,0
West Virginia,South,2013,1
West Virginia,South,2014,0
West Virginia,South,2015,0
Wisconsin,Midwest,2010,0
Wisconsin,Midwest,2011,0
Wisconsin,Midwest,2012,0
Wisconsin,Midwest,2013,0
Wisconsin,Midwest,2014,0
Wisconsin,Midwest,2015,0
Wyoming,West,2010,43
Wyoming,West,2011,6
Wyoming,West,2012,9
Wyoming,West,2013,73
Wyoming,West,2014,179
Wyoming,West,2015,198

1 Ответ

0 голосов
/ 02 октября 2019

Для сортировки баров вы можете сортировать саму выделенную область (медленнее *) или сортировать массив данных (быстрее) перед объединением данных и перед вычислением области шкалы диапазона. Так как Array.prototype.sort() сортирует на месте, это просто: 

dataset.sort(function(a, b){
    return b.count - a.count;
})

Однако обратите внимание на некоторые факты:

  1. Это будет сортировать весь массив , и у вас есть категориальная ось y, где состояние может иметь данные за многие годы. Поэтому сначала отфильтруйте массив данных по нужному году.

  2. Ваш forEach неверен, вы должны привести строки к числам: 

    d.count = +d.count

    Кроме того, вы неМне не нужна скобочная запись, так как у вас есть имя свойства.

  3. Я предлагаю вам удалить все эти if внутри attr обратных вызовов. Разберитесь с фильтрами снаружи.

Кстати, ваш домен рассчитан правильно (но это никак не связано с порядком баров).

* Сортировка выделения не только медленнее сортировки массива, вы также не можете использовать шкалу для позиционирования элементов, для чего требуется другой код, просто чтобы перевести все.

...