Javascript dc.js-图表未渲染（单行条形图-水平行），图例、轴和刻度线/值除外（不渲染）

场景

我想查看我的dc.js水平行堆叠条形图（单行图），但没有显示任何图表，只有带有名称的图例、带有记号标记的轴出现

屏幕截图

$scope.avgCycleTime = function(){


    var data = [ 
                    {"Project":"Expedition","Stage": "Created", "Days":12},
                    {"Project":"Expedition","Stage": "Active", "Days":14},
                    {"Project":"Expedition","Stage": "Closure", "Days":2}
    ];
    var ndx = crossfilter(data);

    data.forEach(function(x) {
      x.Days = 0;
    });

    var ndx = crossfilter(data)

    var xdim = ndx.dimension(function (d) {return d.Days;}); 

    function root_function(dim,stack_names) {
        return dim.group().reduce(
      function(p, v) {
        stack_names.forEach(stack_name => {
          if(v[stack_name] !== undefined)
              p[stack_name] = (p[v[stack_name]] || 0) + v[stack_name]
        });
        return p;}, 
      function(p, v) {
        stack_names.forEach(stack_name => {
          if(v[stack_name] !== undefined)
              p[stack_name] = (p[v[stack_name]] || 0) + v[stack_name]
        });
        return p;}, 
      function() {
        return {};
      });}

    var stages = ['Created', 'Active', 'Closure'];
    var ygroup = root_function(xdim,stages)

    function sel_stack(i) {
    return function(d) {
      return d.value[i];
    };}

    cycleChart = new dc.barChart("#risk-cycle-chart");


    var chart = document.getElementById('risk-cycle-chart'); 


    heightStatusChart =  200;
    widthStatusChart = Math.floor(parseFloat(window.getComputedStyle(chart, null).width))
     - 2*parseInt(window.getComputedStyle(chart, null).getPropertyValue('padding-top'));    


    cycleChart
      .x(d3.scaleLinear().domain([0,7,14,21,28]))
      .dimension(xdim)
      .group(ygroup, data[0].Project, sel_stack(data[0].Project))
      .xUnits(dc.units.ordinal)
      .margins({left:75, top: 0, right: 0, bottom: 20})
      .width(widthStatusChart) 
      .height(heightStatusChart)
      .legend(dc.legend());


    for(var i = 1; i<stages.length; ++i)
      cycleChart.stack(ygroup, stages[i], sel_stack(stages[i]));

代码段中的以下数据集

问题

如何使用dc.js/d3.js成功渲染图表

代码片段

$scope.avgCycleTime = function(){


    var data = [ 
                    {"Project":"Expedition","Stage": "Created", "Days":12},
                    {"Project":"Expedition","Stage": "Active", "Days":14},
                    {"Project":"Expedition","Stage": "Closure", "Days":2}
    ];
    var ndx = crossfilter(data);

    data.forEach(function(x) {
      x.Days = 0;
    });

    var ndx = crossfilter(data)

    var xdim = ndx.dimension(function (d) {return d.Days;}); 

    function root_function(dim,stack_names) {
        return dim.group().reduce(
      function(p, v) {
        stack_names.forEach(stack_name => {
          if(v[stack_name] !== undefined)
              p[stack_name] = (p[v[stack_name]] || 0) + v[stack_name]
        });
        return p;}, 
      function(p, v) {
        stack_names.forEach(stack_name => {
          if(v[stack_name] !== undefined)
              p[stack_name] = (p[v[stack_name]] || 0) + v[stack_name]
        });
        return p;}, 
      function() {
        return {};
      });}

    var stages = ['Created', 'Active', 'Closure'];
    var ygroup = root_function(xdim,stages)

    function sel_stack(i) {
    return function(d) {
      return d.value[i];
    };}

    cycleChart = new dc.barChart("#risk-cycle-chart");


    var chart = document.getElementById('risk-cycle-chart'); 


    heightStatusChart =  200;
    widthStatusChart = Math.floor(parseFloat(window.getComputedStyle(chart, null).width))
     - 2*parseInt(window.getComputedStyle(chart, null).getPropertyValue('padding-top'));    


    cycleChart
      .x(d3.scaleLinear().domain([0,7,14,21,28]))
      .dimension(xdim)
      .group(ygroup, data[0].Project, sel_stack(data[0].Project))
      .xUnits(dc.units.ordinal)
      .margins({left:75, top: 0, right: 0, bottom: 20})
      .width(widthStatusChart) 
      .height(heightStatusChart)
      .legend(dc.legend());


    for(var i = 1; i<stages.length; ++i)
      cycleChart.stack(ygroup, stages[i], sel_stack(stages[i]));

$scope.avgCycleTime=function（）{
var数据=[
{“项目”：“考察”，“阶段”：“创建”，“天数”：12}，
{“项目”：“考察”，“阶段”：“活动”，“天数”：14}，
{“项目”：“考察”，“阶段”：“结束”，“天数”：2}
];
var ndx=交叉滤波器（数据）；
data.forEach（函数（x）{
x、 天数=0；
});
var ndx=交叉过滤器（数据）
var xdim=ndx.dimension（函数（d）{返回d.Days；}）；
函数根函数（dim、堆栈名称）{
返回dim.group（）.reduce(
功能（p，v）{
stack\u name.forEach（stack\u name=>{
if（v[堆栈名称]！==未定义）
p[stack_name]=（p[v[stack_name]|0）+v[stack_name]
});
返回p；}，
功能（p，v）{
stack\u name.forEach（stack\u name=>{
if（v[堆栈名称]！==未定义）
p[stack_name]=（p[v[stack_name]|0）+v[stack_name]
});
返回p；}，
函数（）{
返回{}；
});}
var stages=['Created'，'Active'，'Closure']；
var ygroup=根函数（xdim，阶段）
函数选择栈（一）{
返回函数（d）{
返回d.值[i]；
};}
cycleChart=新的dc.条形图（“风险周期图”）；
var图表=document.getElementById（'risk-cycle-chart'）；
高度状态图=200；
widthStatusChart=Math.floor（parseFloat（window.getComputedStyle（chart，null.width））
-2*parseInt（window.getComputedStyle（图表，null）.getPropertyValue（'padding-top'）；
自行车艺术
.x（d3.scaleLinear（）.domain（[0,7,14,21,28]））
.维度（xdim）
.group（ygroup，数据[0]。项目，选择堆栈（数据[0]。项目））
.xUnits（dc.units.序数）
.margins（{左：75，上：0，右：0，下：20}）
.宽度（宽度状态图）
.高度（高度状态图）
.legend（dc.legend（））；
对于（var i=1；iSigh，我猜dc.js和crossfilter有一个陡峭的学习曲线。这里没有任何“有趣”的问题，只是一些小故障：

dc.barChart
不是构造函数。请使用
new dc.barChart（…）
或
dc.barChart（…）
您正在清零维度使用的字段
d.Days
，因此只有一个仓位
您的x刻度应该与
xUnits
匹配，因此
d3.scaleOrdinal
不是
d3.scaleLinear
您已将数据从具有独立字段的
已创建
，
活动
，
关闭
更改为一个名为
阶段
的字段。使用此数据格式，您的简化程序可能如下所示

function root_function(dim, stack_field, stack_names) {
  return dim.group().reduce(
    function(p, v) {
      p[v[stack_field]] = p[v[stack_field]] + 1; // 2
      return p;},
    function(p, v) {
      p[v[stack_field]] = p[v[stack_field]] - 1; // 3
      return p;}, 
    function() {
      return Object.fromEntries(stack_names.map(sn => [sn,0])); // 1
    });}

使用值为0的每个
堆栈\u名称的字段初始化每个箱子

将行添加到bin时，请使用
stack_field
；增加该字段的值来确定它影响的字段
从存储箱中删除行时，按相同方式递减

您请求的x域为
[0,7,14,21,28]
，但您的
天数都不符合这些值。如果您想进行四舍五入，可以这样做

var xdim = ndx.dimension(function (d) {return Math.floor(d.Days/7)*7;}); 


.group（ygroup，数据[0].Project，sel_堆栈（数据[0].Project））
没有意义，因为您是按
阶段而不是按
项目进行堆栈的；这应该是
.group（ygroup，阶段[0]，sel_堆栈（阶段[0]）

通过上述更改，我们可以得到一个图表，前三个箱子中的每个箱子都有一个堆栈：


.
对于这个网格部分，我没有使用像d3/dc这样的矢量图形生成器，而是创建了这样的表


$scope.avgCycleTime=function（）{
var数据=[
{“项目”：“探险”，“阶段”：“创建”，“天数”：12，“颜色”：“rgb（166，206，227）”}，
{“项目”：“探险”，“阶段”：“活动”，“天数”：14，“颜色”：“rgb（25318098）”，
{“项目”：“探险”，“阶段”：“结束”，“天数”：2，“颜色”：“rgb（179222105）”}
];
var tbl=document.createElement（“表”）；
var tblBody=document.createElement（“tbody”）；
//表行创建
var行=document.createElement（“tr”）；
对于（var i=0；我可以请您为您的问题创建一个工作实例吗？示例几乎完成了；它只需要
风险周期图
的html，而图表构造函数使用了错误的语法。哇！！再次感谢您Gordon，您能建议我如何控制条形图的动画水平宽度，而不是在l上斜向上吗oad，如果可以通过某种方式或css进行修改？如何移动水平刻度线，使“0”显示在y轴的中心线上，而不是y轴右侧的3.5个单位。此外，还有一天（12,14,2）确定与水平单位对应的每个堆叠矩形的宽度。我试图拼凑的示例。哦，我想你应该在你的问题中指定。不支持可变宽度条，抱歉。很难控制动画。不确定是否可以取消顺序比例条的中心，might必须使用线性刻度和适当的XUnit。哦，我明白了。当然，如果你只需要一个维度，那就容易多了。感谢你发布你的解决方案！（我不明白它与你的问题有什么关系，但这很酷。问正确的问题本身就是一个难题！）