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

Question

我正在创建要在面积图中使用的动态数据。该图表应类似于以下内容：

下面是需要用到的数据：

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
  }
]

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

上面的问题我已经实现了，最后的数据会被转换成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)。更新下面的小提琴。

解决小提琴

标签： javascriptdc.jscrossfilter