Javascript d3.js如何从阵列中绘制堆叠的水平条？_Javascript_D3.js

Javascript d3.js如何从阵列中绘制堆叠的水平条？

javascript d3.js

Javascript d3.js如何从阵列中绘制堆叠的水平条？,javascript,d3.js,Javascript,D3.js,我正在尝试让这个堆叠水平条的特定示例在独立浏览器中工作：。我知道以前有人问过关于这段代码的问题，但从未将其应用到工作示例中。当我在浏览器中运行下面的代码（即在支流站点之外）时，会出现以下错误： '错误：属性transform=“translate（0，NaN）”的值无效'。为什么代码不能在浏览器中运行？是否缺少某些元素 <body> <script src="http://d3js.org/d3.v3.min.js"></script> <div id=

我正在尝试让这个堆叠水平条的特定示例在独立浏览器中工作：。我知道以前有人问过关于这段代码的问题，但从未将其应用到工作示例中。当我在浏览器中运行下面的代码（即在支流站点之外）时，会出现以下错误： '错误：属性transform=“translate（0，NaN）”的值无效'。为什么代码不能在浏览器中运行？是否缺少某些元素

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="container">

<section id="display" style="width: 1038px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="677" height="533"></svg></section>
</div>
<script>
/*modified from Mike Bostock at http://bl.ocks.org/3943967 */

var data = [
{"key":"FL", "pop1":3000, "pop2":4000, "pop3":5000},
{"key":"CA", "pop1":3000, "pop2":3000, "pop3":3000},
{"key":"NY", "pop1":12000, "pop2":5000, "pop3":13000},
{"key":"NC", "pop1":8000, "pop2":21000, "pop3":11000},
{"key":"SC", "pop1":30000, "pop2":12000, "pop3":8000},
{"key":"AZ", "pop1":26614, "pop2":6944, "pop3":30778},
{"key":"TX", "pop1":8000, "pop2":12088, "pop3":20000}
];

var n = 3, // number of layers
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;}),

//go through each layer (pop1, pop2 etc, that's the range(n) part)
//then go through each object in data and pull out that objects's population data
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) { 
            var a = [];
            for (var i = 0; i < m; ++i) {
                a[i] = {x: i, y: data[i]['pop' + (d+1)]};  
            }
            return a;
         })),

//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer,      function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 50},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([2, height], .08);

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

var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);

var xx = margin.top;

var svg = d3.select("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 layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });

 layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });

var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
.tickValues(labels)
.orient("left");

svg.append("g")
.attr("class", "y axis")
.call(yAxis);
</script

    </body>


/*由Mike Bostock在http://bl.ocks.org/3943967 */
风险值数据=[
{“键”：“FL”，“pop1”：3000，“pop2”：4000，“pop3”：5000}，
{“key”：“CA”，“pop1”：3000，“pop2”：3000，“pop3”：3000}，
{“键”：“NY”，“pop1”：12000，“pop2”：5000，“pop3”：13000}，
{“键”：“NC”，“pop1”：8000，“pop2”：21000，“pop3”：11000}，
{“key”：“SC”，“pop1”：30000，“pop2”：12000，“pop3”：8000}，
{“key”：“AZ”，“pop1”：26614，“pop2”：6944，“pop3”：30778}，
{“key”：“TX”，“pop1”：8000，“pop2”：12088，“pop3”：20000}
];
var n=3，//层数
m=data.length，//每层的样本数
stack=d3.layout.stack（），
labels=data.map（函数（d）{return d.key；}），
//遍历每一层（pop1、pop2等，这是范围（n）部分）
//然后遍历数据中的每个对象并提取该对象的总体数据
//将其放入一个数组中，其中x是索引，y是数字
层=堆栈（d3.range（n）.map（函数（d）{
var a=[]；
对于（变量i=0；i你发现了一个相当有趣的问题，它可能与我们发现的另一个类似问题有关。看
为了测试理论，这里是您的代码副本，并粘贴到堆栈溢出片段中。第一个是使用D33.2.8，似乎工作正常

/*由Mike Bostock在http://bl.ocks.org/3943967 */
风险值数据=[
{“键”：“FL”，“pop1”：3000，“pop2”：4000，“pop3”：5000}，
{“key”：“CA”，“pop1”：3000，“pop2”：3000，“pop3”：3000}，
{“键”：“NY”，“pop1”：12000，“pop2”：5000，“pop3”：13000}，
{“键”：“NC”，“pop1”：8000，“pop2”：21000，“pop3”：11000}，
{“key”：“SC”，“pop1”：30000，“pop2”：12000，“pop3”：8000}，
{“key”：“AZ”，“pop1”：26614，“pop2”：6944，“pop3”：30778}，
{“key”：“TX”，“pop1”：8000，“pop2”：12088，“pop3”：20000}
];
var n=3，//层数
m=data.length，//每层的样本数
stack=d3.layout.stack（），
labels=data.map（函数（d）{return d.key；}），
//遍历每一层（pop1、pop2等，这是范围（n）部分）
//然后遍历数据中的每个对象并提取该对象的总体数据
//将其放入一个数组中，其中x是索引，y是数字
层=堆栈（d3.range（n）.map（函数（d）{
var a=[]；
对于（变量i=0；i

我没有想到要看d3版本。接得好！对于这个伟大的解释和解决方案，我竖起了大拇指。我已经找了一个小时了，你找到了！如果我能投两次票，我会：D