在D3 Streamgraph中正确使用stack.values（[accessor]）？

我试图用D3 API reference和this question at Stack Overflow中演示的值访问器为每层创建D3流图表。在D3 Streamgraph中正确使用stack.values（[accessor]）？

标题追加罚款，但它似乎并没有附加值。任何想法可能会出错？

我是新来的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; });

来源

2012-06-13 Derek Hill

你能为我提供的代码来做到这一点？我复制你的代码，但它不起作用。谢谢。对不起，我是d3和js的新手。 – v4r

@DuongThang恐怕我没有这个方便了。它绝对有效。也许如果你用你的代码发布一个问题，我可以看看它。 –

堆栈布局知道你所指定的值访问，但该地区发电机没有。所以，你必须通过d.values而非d该地区发生，就像这样：

.attr("d", function(d) { return area(d.values); })

来源

2012-06-14 16:09:39 mbostock

迈克你是一个传奇人物。谢谢你帮助我，并感谢发明d3！ –

在D3 Streamgraph中正确使用stack.values（[accessor]）？

回答

相关问题