updates only once
HTML
<script src="https://d3js.org/d3.v3.js"></script>
<form>
<select id="selector">
<option value="Europe">Europe</option>
<option value="Africa">Africa</option>
<option value="Americas">Americas</option>
<option value="Asia">Asia</option>
<option value="Oceania">Oceania</option>
</select>
</form>
JavaScript
d3.json("https://dl.dropboxusercontent.com/s/nfi0nu2rsgojlwl/countries.json", function(data) {
var w = 700;
var h = 500;
var offset = 100;
var padding = 20;
var colors = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var gs, asd;
var dataGenerator = function(continent) {
var dataset = [];
var dataset2 = [];
var asd = [];
for (var i = 0; i < data.length; i++) { // for every country in data
// if it's continent value is Europe
if (data[i]["continent"] == continent) {
years = data[i]["years"];
dss = [];
for (var i2 = 0; i2 < years.length; i2++) {
if (years[i2]["year"] > 1999) {
var ds = {
x: i2,
y: years[i2]["population"]
};
dss.push(ds);
}
}
dataset.push(dss);
dataset = dataset.slice(0, 10);
dataset2.push(data[i]["name"]);
dataset2 = dataset2.slice(0, 10);
}
}
res = [dataset, dataset2];
return res;
}
var textsInit = function(ds, ds2) {
var stack = d3.layout.stack();
stack_data = stack(ds);
var xScale = d3.scale.ordinal()
.domain(d3.range(ds[0].length))
.rangeRoundBands([0, w - offset], 0.50);
var yScale = d3.scale.linear()
.domain([0,
d3.max(stack_data, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y - 20;
});
})
])
.range([padding, h - 50]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(ds[0].length);
gs = svg.selectAll("g").data(stack_data);
bars = gs.enter();
bars.append("g")
.attr("class", "stacked_bars")
.attr("fill", function(d, i) {
return colors(i);
});
asd = gs.selectAll("rect").data(function(d) {
return d;
});
asd.enter().append("rect");
...