Javascript 按值降序排列条形图

我很难让这个条形图按照条形图的长度降序排序，也很难根据域正确缩放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

---

要对条形图进行排序，您可以在加入数据和计算带刻度的域之前对选择本身进行排序（较慢*），也可以对数据数组进行排序（较快）。既然分类已经到位，它只是：

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

但是，请注意一些事实：

这将对整个数组进行排序，并且有一个分类y轴，其中一个状态可以有多年的数据。因此，首先按所需年份过滤数据数组

您的

forEach

不正确，应强制字符串为数字：

d.count = +d.count

此外，您不需要括号表示法，因为您有属性的名称

我建议您删除

attr

回调中的所有

if

。处理外面的过滤器

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

---

---

*对所选内容进行排序不仅比对数组进行排序慢，而且不能使用比例来定位元素，需要另一个代码来翻译所有内容。

谢谢。我知道我可以像你说的那样对数据集进行排序。在计算频带标度的域之前，如何以及在何处过滤阵列？这最终需要成为交互式viz的一部分，这就是我在回调中进行过滤的原因。你能给我指一些示例代码吗？我试图在调用域之前进行筛选，但它不起作用。它需要在y域内吗？我的答案是关于排序的，我不确定你说的过滤器是什么。如果你说的是过滤这些年，这只是一个建议，我建议你创建一个在线版本的代码，并将其作为一个新问题发布，附带相关细节。谢谢！为这一混乱道歉。在此处重试：