我尝试使用d3.js创建一个条形图,以显示针对不同城镇的人口,但是,当我尝试在两个不同的数据集之间创建转换时,我发现了在tsv格式中),d3.js不会触发并触发动画到第二组数据。我不确定我做错了什么。
这是我目前的代码。
<div id="options">
<button id="set1">2016</button>
<button onclick="update2021()" id="set2">2021</button>
<button id="set2">2026</button>
<button id="set2">2031</button>
<button id="set2">2036</button>
<button id="set2">2041</button>
<button id="set2">2046</button>
<button id="set2">2050</button>
<svg width="3000" height="500"></svg>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("sydtest.tsv", function(d) {
d.population = +d.population;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.lga; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Y-Axis Code
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(25))
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.lga); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.population); });
});
function update2021() {
// Get the data again
d3.tsv("sydtest.tsv", function(d) {
d.population = +d.population;
return d;
}, function(error, data) {
if (error) throw error;
// Scale the range of the data again
x.domain(data.map(function(d) { return d.lga; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
// Select the section we want to apply our changes to
var svg = d3.select("svg").transition();
// Make the changes
svg.select(".bar") // change the line
data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.lga); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.population); });
svg.select("axis--x") // change the x axis
.duration(750)
.call(g);
svg.select("axis--y") // change the y axis
.duration(750)
.call(g);
});
}
</script>
我已经按照之前编写的一些代码进行了操作,发现我可以让y轴和x轴动画,但是它自己实际上不会在画布上渲染的数据。从这一点我推断出我可能已经写过了“过渡期”#39;我的部分代码错了。
如果有人能告诉我我是否错误地实施了转换代码,我将不胜感激!