Javascript d3堆栈条形图问题

我正在使用d3创建一个堆叠条形图。图形轴正在渲染，但条形图没有渲染，JS控制台也没有抛出任何错误

代码如下：

var保证金={
前20名，
右:30,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
风险值数据=[{
数据：[
[“2016-01-20T10:36:00.000Z”，95.6981132075472]，
[“2016-01-20T11:10:00.000Z”，95.8882352941176]，
[“2016-01-20T11:44:00.000Z”，95.8470588235294]，
[“2016-01-20T12:18:00.000Z”，95.7941176470588]，
[“2016-01-20T12:52:00.000Z”，95.675]，
[“2016-01-20T13:26:00.000Z”，95.7573529411765]，
[“2016-01-20T14:00:00.000Z”，95.8294117647059]，
[“2016-01-20T14:34:00.000Z”，95.7736842105263]
],
标签：“a”
}, {
数据：[
[“2016-01-20T10:36:00.000Z”，3.18867924528302]，
[“2016-01-20T11:10:00.000Z”，3.15441176470588]，
[“2016-01-20T11:44:00.000Z”，3.15]，
[“2016-01-20T12:18:00.000Z”，3.163352941765]，
[“2016-01-20T12:52:00.000Z”，3.13970588235294]，
[“2016-01-20T13:26:00.000Z”，3.17794117647059]，
[“2016-01-20T14:00:00.000Z”，3.16617647058824]，
[“2016-01-20T14:34:00.000Z”，3.188889]
],
标签：“b”
}];
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]）；
变量y=d3.scale.linear（）
.rangeRound（[高度，0]）；
var z=d3.scale.category10（）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var stack=d3.layout.stack（）
.价值观（功能（d）{
返回数据；
})
.x（功能（d）{
返回新日期（d[0]）；
})
.y（功能（d）{
返回d[1]；
});
变量层=堆栈（数据）；
var ary=[]；
层。forEach（函数（d）{
ary.push（d.data）；
});
x、 域（d3.范围（d3.合并（ary），函数（d）{
返回新日期（d[0]）；
}));
y、 域（[0，d3.max（d3.merge（ari），函数（d）{
返回d.y0+d.y；
})]);
var layer=svg.selectAll（“.layer”）
.数据（图层）
.enter（）.append（“g”）
.attr（“类”、“层”）
.样式（“填充”，功能（d，i）{
返回z（i）；
});
图层。选择全部（“rect”）
.数据（功能（d）{
返回d；
})
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回x（d.x）；
})
.attr（“y”，函数（d）{
返回y（d.y+d.y0）；
})
.attr（“高度”，功能（d）{
返回y（d.y0）-y（d.y+d.y0）；
})
.attr（“宽度”，x.rangeBand（）-1）；
svg.append（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
正文{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
问题在本节：

layer.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .attr("x", function(d) {
    console.log("d = ", d) // this doesn't get called since there is no data
    return x(d.x);
  })

d
是一个对象，但d3需要一个数组，因此它不存储您传递给它的数据

我想这就是你想要的（虽然输出图看起来很不对劲，所以我不是100%确定…）。不管是哪种方式，只要记住您希望在
data
函数中返回

layer.selectAll("rect")
      .data(function(d) {
        return d.data;
      })

我已经在上面的代码中修复了axis的问题。由于@Adilapaya指出的错误，因此能够显示堆栈栏


var保证金={
前20名，
右:30,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
风险值数据=[{
数据：[
[“2016-01-20T10:36:00.000Z”，95.6981132075472]，
[“2016-01-20T11:10:00.000Z”，95.8882352941176]，
[“2016-01-20T11:44:00.000Z”，95.8470588235294]，
[“2016-01-20T12:18:00.000Z”，95.7941176470588]，
[“2016-01-20T12:52:00.000Z”，95.675]，
[“2016-01-20T13:26:00.000Z”，95.7573529411765]，
[“2016-01-20T14:00:00.000Z”，95.8294117647059]，
[“2016-01-20T14:34:00.000Z”，95.7736842105263]
],
标签：“a”
}, {
数据：[
[“2016-01-20T10:36:00.000Z”，3.18867924528302]，
[“2016-01-20T11:10:00.000Z”，3.15441176470588]，
[“2016-01-20T11:44:00.000Z”，3.15]，
[“2016-01-20T12:18:00.000Z”，3.163352941765]，
[“2016-01-20T12:52:00.000Z”，3.13970588235294]，
[“2016-01-20T13:26:00.000Z”，3.17794117647059]，
[“2016-01-20T14:00:00.000Z”，3.16617647058824]，
[“2016-01-20T14:34:00.000Z”，3.188889]
],
标签：“b”
}];
var parseDate=d3.time.format（“%Y-%m-%dT%H:%m:%S.%LZ”）.parse；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，0.7）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var z=d3.scale.category10（）；
var xAxis=d3.svg.axis（）
.比例（x）
.方向（“底部”）.刻度（d3.time.hour，1）
.tickSize（0）.innerTickSize（-height）.outerTickSize（0）.tickFormat（d3.time.format（“%H:%M”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var stack=d3.layout.stack（）
.价值观（功能（d）{
返回数据；
})
.x（功能（d）{
返回日期（d[0]）；
})
.y（功能（d）{
返回d[1]；
});
变量层=堆栈（数据）；
var ary=[]；
层。forEach（函数（d）{
ary.push（d.data）；
});
console.log（“d=，ari）
x、 域（ary[0]。映射（函数（d）{
返回日期（d[0]）；
}));
y、 域（[0，d3.max（d3.merge（ari），函数（d）{
返回d.y0+d.y；
})]);
var layer=svg.selectAll（“.layer”）
.数据（图层）
.enter（）.append（“g”）
.attr（“类”、“层”）
.样式（“填充”，功能（d，i）{
返回z（i）；
});
图层。选择全部（“rect”）
.数据（功能（d）{
返回数据；
})
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回x（解析日期（d[0]）；
})
.attr（“y”，函数（d）{
返回y（d.y+d.y0）；
})