我一直在d3.js中练习过渡，但是我的过渡有点怪异，我希望条形图从左向右滚动，相反，它们也从上到下滚动，而不是像单个矩形一样作为一个组，< / p>
请告知应该发生什么。
图像image 2和image 4是我的项目的输出，而所需的输出是显示我希望输出的图像
我尝试更改转换，但没有任何效果
main.js
----------------------
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 + 50)
.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 -10)
.attr("x", width - 40)
.attr("font-size", "40px")
.attr("opacity", "0.4")
.attr("text-anchor", "middle")
.text("1800");
var data =
d3.json("buildings.json").then(function(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
})
});
d3.interval(function(){
time = (time < 5) ? time+1 : 0
update(formattedData[time]);
}, 10000);
update(formattedData[0]);
})
function update(data) {
var t = d3.transition()
.duration(10000);
var rects = g.selectAll("rect").data(data, function(d){
return d;
});
rects.exit()
.attr("class", "exit")
.remove();
rects.enter()
.append("rect")
.attr("class", "enter")
.transition(t)
.attr("x", 0)
.attr("y", function(d,i){
return i*20;
})
.attr("width", function(d,i){
return d.budget;
})
.attr("height", 18)
.attr("fill",function(d,i){
if(d.country=="Italy")
{
return "green";
}else if(d.country=="Australia"){
return "blue";
}
});
timeLabel.text(+(time + 1800))
}
data
---------------------------
[
{
"countries": [
{
"continent": "europe",
"country": "France",
"budget": 4687422
},
{
"continent": "europe",
"country": "Germany",
"budget": 4687422
},
{
"continent": "europe",
"country": "United Kingdom",
"budget": 4687422
},
{
"continent": "europe",
"country": "Spain",
"budget": 4687422
},
{
"continent": "europe",
"country": "Brazil",
"budget": 4687422
},
{
"continent": "europe",
"country": "China",
"budget": 4687422
},
{
"continent": "europe",
"country": "Saudi Arabia",
"budget": 4687422
},
{
"continent": "europe",
"country": "India",
"budget": 4687422
},
{
"continent": "europe",
"country": "Russia",
"budget": 4687422
},
{
"continent": "europe",
"country": "Soviet Union",
"budget": 4687422
},
{
"continent": "europe",
"country": "Israel",
"budget": 4687422
},
{
"continent": "europe",
"country": "United States",
"budget": 4687422
},
{
"continent": "europe",
"country": "Canada",
"budget": 4687422
},
{
"continent": "europe",
"country": "Italy",
"budget": 4687422
},
{
"continent": "europe",
"country": "Japan",
"budget": 4687422
},
{
"continent": "europe",
"country": "South Korea",
"budget": 4687422
},
{
"continent": "europe",
"country": "Australia",
"budget": 4687422
},
{
"continent": "europe",
"country": "Turkey",
"budget": 4687422
}
],
"year": "1800"
},
{
"countries": [
{
"continent": "europe",
"country": "France",
"budget": 4687422
},
{
"continent": "europe",
"country": "Germany",
"budget": 4687422
},
{
"continent": "europe",
"country": "United Kingdom",
"budget": 4687422
},
{
"continent": "europe",
"country": "Spain",
"budget": 4687422
},
{
"continent": "europe",
"country": "Brazil",
"budget": 4687422
},
{
"continent": "europe",
"country": "China",
"budget": 4687422
},
{
"continent": "europe",
"country": "Saudi Arabia",
"budget": 4687422
},
{
"continent": "europe",
"country": "India",
"budget": 4687422
},
{
"continent": "europe",
"country": "Russia",
"budget": 4687422
},
{
"continent": "europe",
"country": "Soviet Union",
"budget": 4687422
},
{
"continent": "europe",
"country": "Israel",
"budget": 4687422
},
{
"continent": "europe",
"country": "United States",
"budget": 4687422
},
{
"continent": "europe",
"country": "Canada",
"budget": 4687422
},
{
"continent": "europe",
"country": "Italy",
"budget": 4687422
},
{
"continent": "europe",
"country": "Japan",
"budget": 4687422
},
{
"continent": "europe",
"country": "South Korea",
"budget": 4687422
},
{
"continent": "europe",
"country": "Australia",
"budget": 4687422
},
{
"continent": "europe",
"country": "Turkey",
"budget": 4687422
}
],
"year": "1805"
}
]
------------------------------------------------------
[1]: https://i.stack.imgur.com/pJohq.png
[2]: https://i.stack.imgur.com/Xl84m.png
[3]: https://i.stack.imgur.com/WRqZx.png