Javascript 如何使用动态数据使用dc.js和crossfilter创建面积图？

我正在创建用于面积图的动态数据。图表应类似于此：

以下是需要使用的数据：

let transformedSubscriptionData = [
  {
     active: 2
     canceled: 22
     date: Sun Jun 09 2019 16:59:21 GMT+0530 (India Standard Time) {}
     month: "6"
     skip: 10
  },
  {
     active: 10
     canceled: 2
     date: Sun Jun 09 2019 16:59:21 GMT+0530 (India Standard Time) {}
     month: "6"
     skip: 0
  }
]

数据中有三种状态：活动状态、取消状态和跳过状态，但这些状态不是固定的，可能会有更多状态添加到数据中，例如，可以添加名为订阅的状态或任何其他状态，因此应动态处理这些状态

我已经解决了上述问题，最后的数据将被转换为SubscriptionData

问题

由于状态是动态的，图表应该动态地呈现数据

代码解释

以下是根据数据创建的维度：

let subscriptionFacts = crossfilter(transformedSubscriptionData);
let allSubscription = subscriptionFacts.groupAll();
let subscriptionDateDimension = subscriptionFacts.dimension(function(d){ 
return d3.timeMonth(d.date)});

下面的状态被过滤并以对象形式存储，然后被推送到数组中，因为它们是动态的：

下面的subscriptionStatusArray包含类似于['active'、'cancelled'、'skip'的状态]

 let subscriptionSumArray = [];

 subscriptionStatusArray.forEach(status => {
   let obj = {};
   obj[status] = subscriptionDateDimension.group().reduceSum(function(d){ return d[status]})

   subscriptionSumArray.push(obj);
 });

 var minDate = d3.timeMonth(subscriptionDateDimension.bottom(1)[0].date);
 var maxDate = d3.timeMonth(subscriptionDateDimension.top(1)[0].date);

subscriptionSumArray包含以下过滤数据：

然后将上述数据添加到下表中：

 let subscriptionChart = dc.lineChart(".subscription-chart")
         .width(400)
         .height(400)
         .brushOn(false)
         .margins({top:10,bottom:30,right:10,left:70})
         .dimension(subscriptionDateDimension)
         subscriptionSumArray.forEach((curr , index) => {
             for(let key in curr) {
                if(index === 0) {
                    subscriptionChart.group(curr[key], key)
                } else {
                    subscriptionChart.stack(curr[key], key)
                }
             }
         })
         subscriptionChart.title(function(d) { return d.key.getDate()+ ' '+ dateNames[d.key.getMonth()] + ' '+ d.key.getFullYear() + ': ' + d.value; })
         .renderHorizontalGridLines(true)
         .renderArea(true)
         .renderDataPoints(true)
         .clipPadding(data.length)
         .legend(dc.legend().y(390).x(90).itemHeight(10).itemWidth(140).gap(5).horizontal(true))
         .xUnits(d3.timeMonths)
         .x(d3.scaleTime().domain([minDate,maxDate]))
         subscriptionChart.xAxis()
         .ticks(12)
         .tickFormat(d3.timeFormat('%b'))


         subscriptionChart.yAxis().ticks(6);

         subscriptionChart.render();

上述数据呈现图表时不包含以下数据：

请帮我把这个修好。多谢各位

更新

找到了解决方案这是一个愚蠢的错误。clipPadding（data.length）应该是.clipPadding（transformedSubscriptionData.length）。更新下面的小提琴

---

嗨，it-你能不能把你在这里发布的代码中缺少的东西拿出来加上？还可以编辑这个问题，这样其他人就可以了解你想做什么，什么不起作用了？@Gordon我在上面添加了JSFiddle，这里是链接@Gordon，明白了。问题出在clipPadding上。更新了小提琴。谢谢你的回复。哦，是的，我把它拿出来了，因为它对我来说没有意义。更改绘图的可见程度，并以像素为单位指定。因此，我不确定您为什么要根据显示的项目数进行更改。但我很高兴你能成功！嗨，它-你能不能把你贴在这里的代码中缺少的东西加进去？还可以编辑这个问题，这样其他人就可以了解你想做什么，什么不起作用了？@Gordon我在上面添加了JSFiddle，这里是链接@Gordon，明白了。问题出在clipPadding上。更新了小提琴。谢谢你的回复。哦，是的，我把它拿出来了，因为它对我来说没有意义。更改绘图的可见程度，并以像素为单位指定。因此，我不确定您为什么要根据显示的项目数进行更改。但我很高兴你能成功！