Layout 具有简单数据的d3js堆栈图_Layout_Stack_D3.js

Layout 具有简单数据的d3js堆栈图

layout d3.js

Layout 具有简单数据的d3js堆栈图,layout,stack,d3.js,Layout,Stack,D3.js,我需要一个非常基本的示例来创建一个堆栈图，如预定义的数组，如下所示： var data = [[ 1, 4, 2, 7], [21, 2, 5, 10], [ 1, 17, 16, 6]] 无论我做什么都会导致错误。例如，TypeError：数据未定义。以下是我迄今为止的简化代码： <!DOCTYPE html> <meta charset="utf-8"> <body> <script s

我需要一个非常基本的示例来创建一个堆栈图，如预定义的数组，如下所示：

var data = [[ 1,  4,  2,  7],
            [21,  2,  5, 10],
            [ 1, 17, 16,  6]]

无论我做什么都会导致错误。例如，TypeError：数据未定义。以下是我迄今为止的简化代码：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v2.js?2.9.5"></script>
<script>

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var data = [[ 1,  4,  2,  7],
            [21,  2,  5, 10],
            [ 1, 17, 16,  6]];

var x = d3.scale.linear()
    .range([0, width])
    .domain([0,3]);

var y = d3.scale.linear()
    .range([height, 0])
    .domain([0,25]);

var z = d3.scale.category20c();

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var stack = d3.layout.stack(data)
      .offset("zero")
      .values(function(d) { return d; })
      .x(function(d, i) { return i; })
      .y(function(d) { return d; });

var area = d3.svg.area()
    .x(function(d, i) { return x(i); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

svg.selectAll(".layer")
      .data(stack)
      .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d, i) { return colors[i]; });

</script>


var margin={顶部：20，右侧：30，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var数据=[[1,4,2,7]，
[21,  2,  5, 10],
[ 1, 17, 16,  6]];
var x=d3.scale.linear（）
.范围（[0，宽度]）
.域（[0,3]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）
.域（[0,25]）；
var z=d3.scale.category20c（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var stack=d3.layout.stack（数据）
.抵销（“零”）
.values（函数（d）{返回d；}）
.x（函数（d，i）{返回i；}）
.y（函数（d）{返回d；}）；
var area=d3.svg.area（）
.x（函数（d，i）{返回x（i）；}）
.y0（函数（d）{返回y（d.y0）；}）
.y1（函数（d）{返回y（d.y0+d.y）；}）；
svg.selectAll（“.layer”）
.数据（堆栈）
.enter（）.append（“路径”）
.attr（“类”、“层”）
.attr（“d”，函数（d）{返回区域（d.values）；}）
.style（“fill”，函数（d，i）{返回颜色[i]；}）；

您可以在中看到一个工作示例

一般来说，我发现更容易将输入数据稍微排列一下，以进入

d3

所期望的默认形式。对于本例，我获取了您的数据并计算了

、

和

y0

值，然后将其传递给默认堆栈布局

var data = [[ 1,  4,  2,  7],
            [21,  2,  5, 10],
            [ 1, 17, 16,  6]];

// permute the data
data = data.map(function(d) { 
    return d.map(function(p, i) { 
        return {x:i, y:p, y0:0};
    });
});

我认为有一种更简单的方法可以做到这一点，但是我在使用

d3.layout.stack（）

的

out（）

函数时遇到了问题，因为您的输入数据是一个值，但是

out（）

函数希望它是一个参考值。这意味着无法使用计算的偏移量更新值，因此

stack（）

返回的数据始终等于输入值

在使stack函数开始工作后，其余部分基本上遵循您链接到的示例：

var stack = d3.layout.stack()
      .offset("zero")

var layers = stack(data);

var area = d3.svg.area()
    .interpolate('cardinal')
    .x(function(d, i) { return x(i); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

svg.selectAll(".layer")
      .data(layers)
      .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d); })
      .style("fill", function(d, i) { return colors(i); });

希望这有帮助

感谢这些帮助，我最大的错误是使用了：返回区域（d.values）；它返回了一个未定义的函数，这使我摆脱了跟踪：-（我总是通过在

function（d）{console.log（d）；返回区域（d）；}等函数中放置console.log（d）
来检查d
所指的内容。通过这种方式，我可以确保访问的值是正确的。您的解决方案似乎只适用于三列数据。我尝试了四列，但显示的结果与我预期的不同。请确保将Y比例域更新为四列的新总和。