我正在尝试使用Dimple.js和D3基于两个非数字变量创建一个堆积的条形图。数据集包含大约50,000个点,每个点以两种方式(部门和渠道)分类。理想情况下,x轴是一系列类别(通道),而y轴表示这些相同类别的计数。我希望基于第二系列类别(部门)来堆叠条形图。

下面的代码完成了堆栈工作,但是如图所示,它没有显示所有通道的总数,而只是显示了特定扇区中通道的存在。

var myChart = new dimple.chart(svg, data);
      var x = myChart.addCategoryAxis("x", "channel");
      myChart.addMeasureAxis("y","channel");
      myChart.addSeries("channel", dimple.plot.bar);
      myChart.draw();


图片:https://scontent-lga1-1.xx.fbcdn.net/hphotos-xpt1/t31.0-8/11223612_10207362634082002_162421922019209911_o.jpg

有没有一种使用Dimple进行聚合的方法?似乎无法在文档中找到它。任何人愿意帮助/有经验的人吗?

非常感谢!

最佳答案

您的代码示例中有一个错字,这不是这里的问题。为了让以后阅读此答案的任何人都清楚,应该阅读(否则我的答案没有意义!):

myChart.addSeries("segment", dimple.plot.bar);


当您在类别上创建度量轴时,它会计算该类别的不同值,在您的情况下,每个通道/段当然都将具有单个不同的通道,这意味着它的值为1。

您在这里面临的问题是,Dimple在执行其他任何操作之前,会将数据聚合到代码(在本例中为通道/段)中定义的最低粒度级别。这意味着像这样的数据集:

channel      segment    brand      sales
----------------------------------------
Ecommerce    Sports     Nike        2000
Ecommerce    Sports     Reebok      3000
Ecommerce    Sports     Adidas      4000
Retail       Sports     Nike        5000
Retail       Sports     Reebok      6000
Retail       Sports     Adidas      7000
Retail       Sports     Puma        8000


会成为:

channel      segment
--------------------
E-commerce   Sports
Retail       Sports


因此,任何计数细节都将丢失。

因此,您有2个选择,这两个选择都要求您对数据进行某种处理,除非您已经可以使用它们。第一个假设在您的示例中,您有一个唯一的列(或每个通道/细分组合至少是唯一的),即品牌。这意味着您可以将代码更改为:

var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis("x", "channel");
myChart.addMeasureAxis("y","brand");
myChart.addSeries("segment", dimple.plot.bar);
myChart.draw();


现在,您的数据将被分组为:

channel      segment      dist brands
-------------------------------------
Ecommerce    Sports                 3
Retail       Sports                 4


替代方法是在数据中添加一列1:

channel      segment    brand      sales     count
--------------------------------------------------
Ecommerce    Sports     Nike        2000         1
Ecommerce    Sports     Reebok      3000         1
Ecommerce    Sports     Adidas      4000         1
Retail       Sports     Nike        5000         1
Retail       Sports     Reebok      6000         1
Retail       Sports     Adidas      7000         1
Retail       Sports     Puma        8000         1


与任何其他数字列相加:

var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis("x", "channel");
myChart.addMeasureAxis("y","count");
myChart.addSeries("segment", dimple.plot.bar);
myChart.draw();


给出相同的结果

channel      segment      sum of count
--------------------------------------
Ecommerce    Sports                  3
Retail       Sports                  4

08-28 10:24