Javascript 条形图：在D3 v5中进行排序时，如何将数据与国家/地区对齐？

我现在正试图在条形图中对国家的数据进行排序，但当我按升序排序数据时，数据和国家之间没有对齐。 以下是我编写的代码（由于代码很长，我必须删除文件的某些部分）：

“严格使用”；
var第三宽度=1000；
var第三个_高度=500；
var第三个_填充=30；
var第三国=[“澳大利亚”、“奥地利”、“丹麦”、“荷兰”、“新西兰”、“挪威”、“瑞典”、“英国”、“美国”、“日本”、“波兰”、“芬兰”、“意大利”、“法国”、“比利时”]
var third_数据=[102,39,81,50,61,79,81,77,59,64,56,65,57,85,50]；
//数值应为：澳大利亚：102；奥地利：39；等等
//在两个数组之间创建映射。
const buildMap=（第三方国家，第三方数据）=>{
常量映射=新映射（）；
for（设i=0；i

这是结果（如你所见，x轴在我的排序前后是相同的）。 你们能帮我知道如何对齐x轴数据，这样国家在排序后就可以与正确的数据对齐吗

---

谢谢大家!

您需要按值对国家进行排序，然后按相同顺序对其名称进行排序：

const sortCountries=（国家，值）=>{
让输入国家=[…国家]；
让inputValues=[…值]；
常量sortedValues=[…values].sort（（a，b）=>a-b）；
const sortedCountries=sortedValue.map（val=>{
const index=inputValues.findIndex（v=>v==val）；
const country=输入国家[索引]；
inputValues=[…inputValues.slice（0，索引），…inputValues.slice（索引+1）]
inputCountries=[…inputCountries.slice（0，索引），…inputCountries.slice（索引+1）]
返回国；
}); 
返回{sortedCountries，sortedValue}；
}
const{sortedCountries，sortedValue}=sortCountries（第三方国家，第三方数据）；

现在，用代码中的

sortedValue

替换

third\u数据

，用

sortedCountries

替换

third\u国家。查看片段中的结果（基于您前面的问题）：


const sortCountries=（国家，值）=>{
让输入国家=[…国家]；
让inputValues=[…值]；
常量sortedValues=[…values].sort（（a，b）=>a-b）；
const sortedCountries=sortedValue.map（val=>{
const index=inputValues.findIndex（v=>v==val）；
const country=输入国家[索引]；
inputValues=[…inputValues.slice（0，索引），…inputValues.slice（索引+1）]
inputCountries=[…inputCountries.slice（0，索引），…inputCountries.slice（索引+1）]
返回国；
}); 
返回{sortedCountries，sortedValue}；
}
常数第三宽度=1000；
常数三分之一高度=450；
常量三次填充=30；
const第三国=[“澳大利亚”、“奥地利”、“丹麦”、“荷兰”、“新西兰”、“挪威”、“瑞典”、“英国”、“美国”、“日本”、“波兰”、“芬兰”、“意大利”、“法国”、“比利时”]
const third_data=[102,39,81,50,61,79,81,77,59,64,56,65,57,85,50]；
const{sortedCountries，sortedValue}=sortCountries（第三方国家，第三方数据）；
const thirdxscale=d3.scaleBand（）
.域（d3.范围（分类值.长度））
.rangeRound（[第三个填充，第三个宽度]）
.填充器（0.1）；
常量第三刻度=d3.scaleLinear（）
.domain（[0，d3.max（分类值）]）
.范围（[第三个_高度-第三个_填充，第三个_填充]）；
const third_xAxis=d3.axisBottom（）
.scale（thirdxscale）.tickFormat（函数（i）{return sortedCountries[i]；}）
常数third_yAxis=d3.axisLeft（）
.刻度（第三刻度）。刻度（5）；
const third_svg=d3。选择（“图表3”）
.append（“svg”）
.attr（“宽度”，第三宽度）
.attr（“高度”，第三高度）；
第三个_svg.selectAll（“rect”）
.数据（分类值）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>第三刻度（i））
.attr（'y'，d=>第三刻度（d））
.attr（“高度”，d=>第三高度-第三填充-第三刻度（d））
.attr（“宽度”，第三个xScale.bandwidth（））
.attr（“fill”，d=>`rgb（0,0，${d*2}）`）；
//在Y轴上创建“人均食物垃圾（kg/年）”
第三个字母svg.append（'text'）
.attr（'x'，5）
.attr（'y'，20）
.attr（'text-anchor'，'left'）
.style（'font-family'，'Helvetica'）
.style（'font-size'，'small'）
.text（“人均食物垃圾（kg/年）”；
第三个字母svg.append（“g”）
.attr（“类”、“轴”）
.attr（“transform”、“translate”（+third_padding+”，0）”）
.呼叫（第三方）；
第三个字母svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（第三个字母高度-第三个字母填充）+”）
.呼叫（第三方）

您必须更新x标尺，并调用g上的x轴生成器，该生成器是x轴元素的父元素。请您更清楚地解释我需要在x标尺中更新哪些内容，好吗？如果您共享用于制作标尺和轴的代码，则更容易显示，解释我尝试在上实现它
"use strict";

var third_width = 1000;
var third_height = 500;
var third_padding = 30;
    
var third_countries = ["Australia", "Austria", "Denmark", "Netherlands","New Zealand", "Norway", "Sweden", "UK","USA","Japan","Poland","Finland","Italy","France","Belgium"]
var third_data = [102, 39, 81, 50, 61, 79, 81, 77, 59, 64, 56, 65, 57, 85, 50];
// The value should be: Australia: 102; Austria: 39; and so on.

// Creating map between two arrays.
const buildMap = (third_countries, third_data) => {
   const map = new Map();
   for(let i = 0; i < third_countries.length; i++){
      map.set(third_countries[i], third_data[i]);
   };
   return map;
};


var numValues = third_data.length;
var sortAscending = function() {
             
   third_svg.selectAll("rect")
            .sort(function(a, b) {
                 return d3.ascending(a, b);
            })
            .attr("x", function(d, i) {
               return third_xScale(i);
   
            });
}

var sortDescending = function() {
             
   third_svg.selectAll("rect")
            .sort(function(a, b) {
                 return d3.descending(a, b);
            })
            .attr("x", function(d, i) {
                 return third_xScale(i);
            })
            .transition()
            .delay(function(d,i){
                   return i /numValues * 1000;
            })
           .duration(2000)
           .ease(d3.easeElasticOut);
         
}       



d3.select("#sortascending").on("click", function() { 
   sortAscending();
            
})


d3.select("#sortdescending").on("click", function() { 
   sortDescending();
            
})