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）。更新下面的小提琴。

Solved Fiddle

如何使用动态数据通过dc.js和交叉过滤器创建面积图？

0 个答案: