如何对过渡条形图进行排序？

Question

我有一个项目，我试图使用转换来显示数据1800-1805年

我已经创建了条形图并可以进行转换，但是这里的问题是我正在尝试对条形图进行排序，以便数据将以降序显示。 我如何对数据进行排序并进行过渡，而不是更改矩形的“ y”属性值，我的代码是为每个单个过渡将现有的矩形替换为已排序的矩形。

我希望我的代码采用这样的方式，即矩形应将其位置从当前位置移动到新位置。

我该怎么做。

我的数据如下

1800年

中国-20000美国-80000法国-15000

公元1801年

中国-25000美国-90000法国-35000

现在，对于此数据，我的代码正在替换法国和中国数据，并且不会上下移动。 我应该在代码中添加些什么来做到这一点？

main.js
-------------

/*
*    main.js
*    Mastering Data Visualization with D3.js
*    2.5 - Activity: Adding SVGs to the screen
*/
var margin = { left:80, right:20, top:50, bottom:100 };

var width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var g = d3.select("#chart-area")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
var time = 0;
/*var xLabel = g.append("text")
    .attr("y", height + 200)
    .attr("x", width / 2)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("GDP Per Capita ($)");
var yLabel = g.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", -40)
    .attr("x", -170)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("Life Expectancy (Years)")*/
var timeLabel = g.append("text")
    .attr("y", height +100)
    .attr("x", width + 100)
    .attr("font-size", "40px")
    .attr("opacity", "0.4")
    .attr("text-anchor", "middle")
    .text("1800");
  var data =      d3.json("buildings.json").then(function(data){
            // console.log(data);

            // Clean data
            data.forEach(function(d) {
                d.Year = +d.Year;
                d.Budget=+d.Budget;
            });



const formattedData = data.map(function(year){
    return year["countries"].filter(function(country){
        var dataExists = (country.budget);
        return dataExists
    })
});

// Run the code every 0.1 second
d3.interval(function(){
    // At the end of our data, loop back
    time = (time < 5) ? time+1 : 0
    update(formattedData[time]);
}, 10000);

// First run of the visualization
update(formattedData[0]);

})

function update(data) {
// Standard transition time for the visualization
var t = d3.transition()
    .duration(10000);

// JOIN new data with old elements.
var rects = g.selectAll("rect").data(data, function(d){

    return d;
});

// EXIT old elements not present in new data.
//rects.exit()
    //.attr("class", "exit")
    //.remove();
// ENTER new elements present in new data.

   rects.enter()
    .append("rect")
    .attr("class", "enter")
    //.attr("fill", function(d) { return continentColor(d.continent); })
  //  .merge(rects)

        .attr("x", 0)
        .attr("y", function(d,i){

          return i*20;
        }).transition(t)
        .attr("width", function(d,i){
          return d.budget/100;
          console.log(d.budget);
        })
        .attr("height", 18)
        .attr("fill",function(d,i){
if(d.country=="Italy")
{
  return "green";
}else if(d.country=="Australia"){
return "blue";

}

        });

// Update the time label
timeLabel.text(+(time + 1800))



}

Answer 1

您的问题只是关键功能，这是实现对象一致性的基础。

现在，您有：

var rects = g.selectAll("rect").data(data, function(d){
    return d;
});

返回d ，即整个原点。 给定您的数据结构，基准是一个object 。

但是， API很清楚键函数返回的值：

如果未指定键功能，则将数据中的第一个数据分配给第一个选定元素，将第二个数据分配给第二个选定元素，依此类推。 通过计算每个数据和元素的字符串标识符，可以指定键函数来控制将哪个数据分配给哪个元素，从而替换默认的按索引联接。 （强调我的）

因此，将按键功能更改为：

var rects = g.selectAll("rect").data(data, function(d){
    return d.country;
    //string---^
});