按值排序的条形图

问题描述 投票：1回答：1

我在使该条形图按条形的长度降序进行排序以及用域正确缩放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
javascript sorting d3.js bar-chart
1个回答
0
投票

为了对条进行排序，您可以对选择本身进行排序（较慢），也可以对数据数组进行排序（较快），然后再加入数据并计算带刻度的域。由于sort在适当的位置排序，因此只是：

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

但是，请注意一些事实：

  1. 这将对[[entire数组进行排序，并且您有一个分类的y轴，其中一个状态可以包含很多年的数据。因此，请先按所需年份过滤数据数组。
  2. 您的forEach不正确，应将字符串强制转换为数字：

    d.count = +d.count 

    此外，由于您具有属性的名称，因此不需要括号表示法。

  3. 我建议您删除if回调中的那些attr。处理外面的过滤器。

顺便说一句，您的域计算是正确的（但与条形的顺序无关）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.