gpt4 book ai didi

javascript - D3 Streamgraph 中 stack.values([accessor]) 的正确用法?

转载 作者:行者123 更新时间:2023-11-30 07:43:51 26 4
gpt4 key购买 nike

我正在尝试使用值访问器创建每层包含附加数据的 D3 流图图表,如 D3 API reference 中所示和 this question at 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); })

关于javascript - D3 Streamgraph 中 stack.values([accessor]) 的正确用法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11009524/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com