[英]Updating D3 streamgraph with new data
我有一個流圖,我想通過更改其數據來更新它。 我有一個折線圖,可以在數據集之間完美過渡,並且我試圖為流圖改編相同的代碼,但收效甚微。 我可以更改每個流的顏色,但不能更改數據。
這是我的更新行功能
function UpdateData() {
// Get new data
d3.csv("data2.csv", function(data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.age = +d.age;
});
// Rescale range
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.age); })]);
var valueline = d3.svg.line()
//.interpolate("interpolation")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.age); });
var svg = d3.select("body").transition();
// change the line
svg.select(".line")
.duration(750)
.attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
});}
這是我對流圖的相同功能的嘗試...
function UpdateData() {
var customPalette = ["#8c564b", "#e377c2", "#7f7f7f"];
var colours = d3.scale.ordinal().range(customPalette);
var nest = d3.nest().key(function(d) { return d.age; });
// Get new data
d3.csv("data2.csv", function(error, data) {
data.forEach(function(d) {
d.date = format.parse(d.date);
d.amount = +d.amount;
});
var svg = d3.select("body").transition();
var layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.duration(750)
.data(layers)
.attr("class", "layer")
.attr("d", function(d) { return (d.values); })
.style("fill", function(d, i) { return colours(i); });
});
}
顏色會發生變化,但值不會傳遞到圖表。 任何意見或建議將不勝感激!
成功!!
終於明白了。 我應該定位路徑本身,而不是定位圖層!
因此,調用您的新數據,
// Get the data again
d3.csv("PopulationStats/UK.csv", function(error, data) {
data.forEach(function(d) {
d.date = format.parse(d.date);
d.amount = +d.amount;
});
築巢
var layers = stack(nest.entries(data));
並更新您的路徑。
d3.selectAll("path")
.data(layers)
.transition()
.duration(750)
.style("fill", function(d, i) { return colours(i); })
.attr("d", function(d) { return area(d.values); });
如此簡單,但是花了我兩天時間才弄清楚!
對於發現此問題的任何其他人來說,這只是一個提示-相同的技術也可以用於更新堆積面積圖示例( http://bl.ocks.org/mbostock/3885211 )中的數據。 一直將我的頭撞在電腦上穩定4個小時,直到我偶然發現了它。 謝謝Daft!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.