Hi I’m doing an area chart with d3.js, this chart add data with a range input. My problem is
I don’t understand how to move the area to left to the new data isn’t displace to right but is showing in
the front. Like this example: https://bl.ocks.org/NGuernse/284749c905b592d8d9cf7927864c0ff5
This is the JS code
var svg = d3.select(“svg”),
margin = { top: 80, right: 20, bottom: 30, left: 50 },
width = +svg.attr(“width”) - margin.left - margin.right,
height = +svg.attr(“height”) - margin.top - margin.bottom,
g = svg
.append(“g”)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);
var parseDate = d3.timeParse("%Y/%m/%d");
console.log(parseDate)
var color = d3
.scaleOrdinal()
.domain(["PVkW", "TBLkW"])
.range(["rgba(249, 208, 87, 0.7)", "rgba(54, 174, 175, 0.65)"]);
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = color;
var area = d3
.area()
.curve(d3.curveMonotoneX)
.x(function(d) {
return x(d.date);
})
.y0(y(0))
.y1(function(d) {
return y(d.kW);
});
d3.csv("data.csv", type, function(error, data) {
if (error) throw error;
var sources = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return { date: d.date, kW: d[id] };
})
};
});
console.log(data, sources);
x.domain(
d3.extent(data, function(d) {
return d.date;
})
);
y.domain([
0,
d3.max(sources, function(c) {
return d3.max(c.values, function(d) {
return d.kW;
});
})
]);
z.domain(
sources.map(function(c) {
return c.id;
})
);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
/*var source = g
.selectAll(".area")
.data(sources)
.enter()
.append("g")
.attr("class", function(d) {
return `area ${d.id}`;
});
source
.append("path")
.attr("d", function(d) {
console.log(area(d.values));
return area(d.values);
})
.style("fill", function(d) {
return z(d.id);
});
*/
var item = 0
var locations = data.forEach(function(d, i){
d.date = item
item= item+1
//console.log(data)
})
var min_year = d3.min(data, function(d) { return d["date"]; }),
max_year = d3.max(data, function(d) { return d["date"]; });
console.log(min_year, "---", max_year)
d3.select("body").append("input")
.attr("type", "range")
.attr("min", min_year)
.attr("max", max_year)
.attr("step", "1")
.attr("id", "year")
.on("input", function input() {
update();
});
function update(){
var slider_year = document.getElementById("year").value;
var new_loc = data.filter(function filter_by_year(d){ if (d["date"] <= slider_year) { return true; } });
new_loc["columns"] = ["date", "PVkW", "TBLkW"];
console.log(new_loc)
var sources_update = new_loc.columns.slice(1).map(function(id) {
return {
id: id,
values: new_loc.map(function(d) {
return { date: d.date, kW: d[id] };
})
};
});
console.log(sources_update)
//new_loc.concat(columns)
//new_loc['columns'].push(columns);
/*new_loc = new_loc.map(function(elem){
return {"columns":elem};
})
var rowLen = new_loc.length
new_loc = new_loc.map(function(elem, i){
if (rowLen === i + 1) {
return {"columns":elem};
} else {
}
})
/*const rowLen = new_loc.length;
new_loc.map((elem, i) => {
console.log(elem, i)
if (rowLen === i + 1) {
return {"columns":elem};
} else {
// not last one
}
})*/
d3.select("svg g").selectAll(".area").remove();
d3.select("svg g").selectAll(".axis.axis--y").remove();
x.domain(
d3.extent(data, function(d) {
return d.date;
})
);
y.domain([
0,
d3.max(sources_update, function(c) {
return d3.max(c.values, function(d) {
return d.kW;
});
})
]);
z.domain(
sources.map(function(c) {
return c.id;
})
);
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Power, kW");
var source = g
.selectAll(".area")
.data(sources_update)
.enter()
.append("g")
.attr("class", function(d) {
console.log(d)
return `area ${d.id}`;
});
var exit = source.exit()
new_loc.shift()
source
.append("path")
.attr("d", function(d) {
//console.log(area(d.values));
return area(d.values);
})
.style("fill", function(d) {
return z(d.id);
})
.transition()
.duration(1000)
//sources_update.shift()
console.log(sources_update.shift())
exit.remove();
}
update();
});
function type(d, _, columns) {
d.date = parseDate(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i)
d[(c = columns[i])] = +d[c];
return d;
}