Y轴在下拉过滤器更改时未更新

Question

我有一个带下拉过滤器的条形图，一旦我点击新过滤器，y轴应该会更新，但事实并非如此，我不确定为什么。条形图会发生变化，但y值保持不变。如果我能得到任何帮助，我真的很乐意。

在这里你可以找到下面的js代码。

d3.csv("ContinentGraph.csv", function(error, data){
// Bar chart based on selected user's row and column
var margin = {top: 30, right: 30, bottom: 70, left: 60},
width = 400 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Get every column value
var elements = Object.keys(data[0])
.filter(function(d){
return ((d != "Continent"));
});
var selection = elements[0];
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d){
return +d[selection];
})])
.range([height, 0]);
var x = d3.scaleBand()
.domain(data.map(function(d){ return d.Continent;}))
.range([0, width]);
var xAxis = d3.axisBottom()
.scale(x)

var yAxis = d3.axisLeft()
.scale(y)
var svg = d3.select("#body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "barchart")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height +  ")")
.call(xAxis)
.selectAll("text")
.style("font-size", "10px")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );

svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll("rectangle")
.data(data)
.enter()
.append("rect")
.attr("class","rectangle")
.attr("width", width/data.length)
.attr("height", function(d){
return height - y(+d[selection]);
})
.attr("x", function(d, i){
return (width / data.length) * i ;
})
.attr("y", function(d){
return y(+d[selection]);
})
.append("title")
.text(function(d){
return d.Continent + " : " + d[selection];
});
var selector = d3.select("#drop")
.append("select")
.attr("id","dropdown")
.on("change", function(d){
selection = document.getElementById("dropdown");
y.domain([0, d3.max(data, function(d){
return +d[selection.value];})]);
yAxis.scale(y);
d3.selectAll(".rectangle")
.transition()
.attr("height", function(d){
return height - y(+d[selection.value]);
})
.attr("x", function(d, i){
return (width / data.length) * i ;
})
.attr("y", function(d){
return y(+d[selection.value]);
})
.ease("linear")
.select("title")
.text(function(d){
return d.Continent + " : " + d[selection.value];
});
d3.selectAll("g.y.axis")
.transition()
.call(yAxis);
});
selector.selectAll("option")
.data(elements)
.enter().append("option")
.attr("value", function(d){
return d;
})
.text(function(d){
return d;
})

});

我还添加了条形图的屏幕截图。条形图如何看起来像

这里还有csv文件(不确定在这里发布的正确方式(

Continent,Max Quantity of Oil Spilled (tonnes),Total Sum Quantity of Oil Spilled (tonnes),Max Amount of Compensation  ,Total Sum of Compensation,Average Quantity of Oil Spilled (tonnes),Average Amount of Compensation,Number of Fund Type,Total Number of Unique Oil Type,Total Number of Incident,Total Number of Unique Cause of Incident
Africa,1000,1015,2952759.42,3000834.3,253.75,750208.575,2,2,4,4
Asia,29000,114033.24,3282511421,5027934340,1226.163871,54063810.11,2,8,93,11
Europe,84000,366649,261391882.7,1336112575,8332.931818,30366194.89,2,5,44,11
North America,110000,220499,164650765.2,180331907.9,20045.36364,16393809.81,2,4,11,7
South America,3600,3985.2,17914901.91,44601931.78,996.3,11150482.95,2,2,4,4

Answer 1

好吧，我想通了！

我只需要更换

.ease("linear")

带有

.ease(d3.easeLinear) 

因为我使用的是v4和.ese是v3