[英]How can I transform an existing d3 area into a stacked area?
目前,我有一个面积图,显示数据的几个路径的面积。 但是,我正在寻找一种将其转换为堆积面积图的方法。 基本上,我希望数据集彼此堆叠,以便它们可见并且不会被其他较大区域隐藏。
我发现了两个示例: http : //bl.ocks.org/mbostock/3885211和http://bl.ocks.org/mbostock/3020685 。 我的问题是我的数据格式非常不同,而且我也不确定d3如何真正完成这项工作。 从概念上讲,我很难理解d3在幕后所做的事情。 我的理解是,它正在计算添加的最后一层之间的差异,但似乎可以在不使用堆栈的情况下完成。
我的数据结构如下:
// datasets { data1: Array[10], data2: Array[10], data3: Array[10] }
// data1 [{value: 2340234, year: 1945}...]
绘图功能是这样的:
function draw(series) {
var data1 = [];
var data2 = [];
var data3 = [];
var prop = 0;
for (prop in series) {
var current = series[prop];
data1.push({value: current.data1, year: current.year});
data2.push({value: current.data2, year: current.year});
data3.push({value: current.data3, year: current.year});
}
var datasets = {
data1: data1,
data2: data2,
data3: data3
};
// updated
var layers = [datasets.data1, datasets.data2, datasets.data3];
var height = 800;
var width = window.innerWidth - 100;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
// updated
var stack = d3.layout.stack()
.values( function(d) { return d.values; });
/
var stacked = stack(layers.map( function(layer) {
return {
values: layer.map( function(d) {
return { year: new Date(d.year, 0), y: +d.value};
})
};
}));
var area = d3.svg.area()
.x( function(d) {
console.log( x(d.year) + ' is the result of x(d.year)' )
return x(d.year);
})
// d.year is defined correctly
.y0(height)
.y1( function(d) {
console.log( y(d.value) + ' is the result of y(d.value)' )
return y(d.value);
});
// d is Object {year: Sat Jan 01 2005 00:00:00 GMT-0800 (PST), y: 47390331, y0: 0}
// here y(d.value) returns NaN for some reason
var svg = d3.select('body').append("svg")
.append("g")
.attr("transform", "translate(" + 120 + "," + 30 + ")");
// Calculate max value
var maxY = 0;
var minY = 0;
series.forEach( function(object) {
for (var key in object) {
if (object[key] > maxY) {
maxY = object[key];
}
}
});
// Calculate min value
series.forEach( function(object) {
for (var key in object) {
if (object[key] < minY) {
minY = object[key];
} else if (minY === 0) {
continue;
}
}
});
var minYear = new Date("1945");
var maxYear = new Date("2015");
x.domain([minYear, maxYear]);
y.domain([minY, maxY]);
svg.append("path").data(stacked)
.attr('d', function(d) { return area(d.values); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
将其转换为堆积面积图的最佳方法是什么?
编辑
固定。 解决方案包括计算面积,如示例所示:
var area = d3.svg.area()
.x(function(d) { return x(d.year); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
快速完成您需要执行的操作:
创建一个合适的堆栈生成器:
var stack = d3.layout.stack()
.values(function(d) { return d.values; });
通过堆栈生成器运行数据。 您应该为生成器提供一个“图层”数组。 对于下面的示例,我假设发生了类似layers = [datasets.data1, datasets.data2, datasets.data3]
情况。
var stacked = stack(layers.map(function(layer) {
return {
values: layer.map(function(d) {
return {year: new Date(d.year, 0), y: +d.value};
})
};
}));
设置生成器时, values
键与之前使用的相同。 如果以后在绘图中需要它们,可以向该对象添加更多东西。
创建堆叠数据后,通过区域生成器运行它:
svg.append("path")
.data(stacked)
.attr("d", function(d) { return area(d.values); });
在您的原始代码中,您使用了.datum(datasets[data])
-如果愿意,您可以继续执行此操作,但是for循环将需要在堆栈数据上运行:
for (var data in stacked) { ...
但是,我建议尽可能在.datum
上使用.data
。 在将原始数据集发送到d3生成器之前,您需要对其进行大量处理,但我怀疑其中大部分是不必要的或重复的。 您应该能够找到如下所示的内容:
var datasets = ...
var stacked = stack(datasets.map(function(dataset) { ... }));
svg.selectAll("path")
.data(stacked)
.enter()
.attr("d", function(d) { return area(d.values); });
设置数据集和生成器只不过是映射您关心的特定字段/值的位置而已。
如果有帮助,我可以尝试获取完整的工作示例。 不过,我需要一个真实的数据文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.