[英]Correct usage of stack.values([accessor]) in D3 Streamgraph?
我正在嘗試使用值訪問器創建每層具有附加數據的D3流圖圖表,如D3 API參考和Stack Overflow上的此問題所示 。
標題可以很好地附加,但是似乎不能附加值。 關於可能出了什么問題的任何想法?
我是d3的新手,所以我確定它很簡單。 代碼如下。
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
];
var m = 2; // number of samples per layer
var width = 960,
height = 500,
mx = m - 1,
my = 350;
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; });
var area = d3.svg.area()
.x(function(d) {
return d.x * width / mx;
})
.y0(function(d) {
return height - d.y0 * height / my;
})
.y1(function(d) {
return height - (d.y + d.y0) * height / my;
});
var vis = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
vis.selectAll("path")
.data(stack(layers))
.enter().append("path")
.attr("d", area)
.append("title")
.text(function(d) { return d.name; });
堆棧布局知道您指定的值訪問器,但區域生成器則不知道。 因此,您必須將d.values
而不是d
傳遞給區域生成器,如下所示:
.attr("d", function(d) { return area(d.values); })
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.