Javascript d3.js/dc.js-如何定义堆叠条形图'；数据集有多个变量时的维度和组？

我有一个和这里贴的问题非常相似的问题：

我是stackoverflow的新手，这意味着我无法添加评论，否则我会要求提供关于该帖子的更多信息。所以，我为任何裁员道歉

我的数据结构如下：

var data = {
  {"id": 'id_value1', ..., "dates": {"name": {"d1":"  0-91","d2":" 92-182","d3":"183-273","d4":"274-364","d5":"365+"}, "value": {"v1":'A',"v2":'A',"v3":'C',"v4":'D',"v5":'B'}},
  {"id": 'id_value2', ..., "dates": {"name": {"d1":"  0-91","d2":" 92-182","d3":"183-273","d4":"274-364","d5":"365+"}, "value": {"v1":'A',"v2":'B',"v3":'D',"v4":'C',"v5":'A'}},
  ...
  {"id": 'id_valueN', ..., "dates": {"name": {"d1":"  0-91","d2":" 92-182","d3":"183-273","d4":"274-364","d5":"365+"}, "value": {"v1":'A',"v2":'A',"v3":'A',"v4":'-',"v5":'-'}}
}

我想创建一个条形图，其中包含“0-91”、“92-182”、“183-273”、“274-364”、“365+”作为x轴变量。我还想让它堆叠起来，这样每一层都是每个字母（a，B，C，D）的计数。存储数据时，d1是v1值的对应日期，v2是日期d2的值，依此类推。换句话说,

id         ...  0-91  92-182  183-273  274-364  365+
id_value1  ...  A     A       C        D        B
id_value2  ...  A     B       D        C        A
...
id_valueN  ...  A     A       A        -        -

我想贴一张我想要的照片，但是（因为我是新来的）我不能。我知道看到我的要求会更有意义

我试过：

var ndx = crossfilter(data);  // all data
var dim = ndx.dimension(function(d) {return d.id;});
var group1 = dim.group().reduceCount(function(d) {return d.dates.value.v1;});
var group2 = dim.group().reduceCount(function(d) {return d.dates.value.v2;});
var group3 = dim.group().reduceCount(function(d) {return d.dates.value.v3;});
var group4 = dim.group().reduceCount(function(d) {return d.dates.value.v4;});
var group5 = dim.group().reduceCount(function(d) {return d.dates.value.v5;});
var compositeChart = dc.compositeChart("#bar")
    .width(1850).height(150)
    .dimension(dim)
    .group(group1)
    .valueAccessor(function(d) {return d.value;})
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .compose([
        dc.barChart(compositeChart).group(group1).gap(10),
        dc.barChart(compositeChart).group(group2).gap(10),
        dc.barChart(compositeChart).group(group3).gap(10),
        dc.barChart(compositeChart).group(group4).gap(10),
        dc.barChart(compositeChart).group(group5).gap(10)
    ]);

但这不起作用。我最接近我想要的是创建5个不同的图表，每个日期一个。以下代码位演示了这一点：

var chart1 = dc.barChart("#chart1");
var dim1 = ndx.dimension(function(d) {return d.dates.name.d1;});
var A1 = dim1.group().reduceSum(function(d) {if(d.dates.value.v1 === "A"){return +1;}else{return 0;}});
var B1 = dim1.group().reduceSum(function(d) {if(d.dates.value.v1 === "B"){return +1;}else{return 0;}});
var C1 = dim1.group().reduceSum(function(d) {if(d.dates.value.v1 === "C"){return +1;}else{return 0;}});
var D1 = dim1.group().reduceSum(function(d) {if(d.dates.value.v1 === "D"){return +1;}else{return 0;}});

var chart2 = dc.barChart("#chart2");
var dim2 = ndx.dimension(function(d) {return d.dates.name.d2;});
var A2 = dim2.group().reduceSum(function(d) {if(d.dates.value.v2 === "A"){return +1;}else{return +0;}});
var B2 = dim2.group().reduceSum(function(d) {if(d.dates.value.v2 === "B"){return +1;}else{return +0;}});
var C2 = dim2.group().reduceSum(function(d) {if(d.dates.value.v2 === "C"){return +1;}else{return +0;}});
var D2 = dim2.group().reduceSum(function(d) {if(d.dates.value.v2 === "D"){return +1;}else{return +0;}});

...

var chart5 = dc.barChart("#chart5");
var dim5 = ndx.dimension(function(d) {return d.dates.name.d5;});
var A5 = dim5.group().reduceSum(function(d) {if(d.dates.value.v5 === "A"){return +1;}else{return 0;}});
var B5 = dim5.group().reduceSum(function(d) {if(d.dates.value.v5 === "B"){return +1;}else{return 0;}});
var C5 = dim5.group().reduceSum(function(d) {if(d.dates.value.v5 === "C"){return +1;}else{return 0;}});
var D5 = dim5.group().reduceSum(function(d) {if(d.dates.value.v5 === "D"){return +1;}else{return 0;}});

chart1
    .width(110).height(450)
    .dimension(dim1)
    .group(A5, "A's")
    .stack(B5, "B's")
    .stack(C5, "C's")
    .stack(D5, "D's")
    .y(d3.scale.linear().domain([minAll,maxAll]))
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticY(false)
    .yAxisLabel("count")
    .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
    .margins({top:20, left:60, right:10, bottom:120});

chart2
    .width(50).height(450)
    .dimension(dim2)
    .group(A2, "A's")
    .stack(B2, "B's")
    .stack(C2, "C's")
    .stack(D2, "D's")
    .y(d3.scale.linear().domain([minAll,maxAll]))
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticY(false)
    .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
    .margins({top:20, left:-1, right:10, bottom:120});

...

chart5
    .width(50).height(450)
    .dimension(dim5)
    .group(A5, "A's")
    .stack(B5, "B's")
    .stack(C5, "C's")
    .stack(D5, "D's")
    .y(d3.scale.linear().domain([minAll,maxAll]))
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticY(false)
    .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
    .margins({top:20, left:-1, right:10, bottom:120});

问题在于，这5个图形要么不具有相同的柔性y轴，要么具有相同的非柔性y轴。我希望能够单击仪表板中的其他图形，结果是仪表板中的所有图形都会更新，以包括/排除选择。这个我没意见。我就是无法创建这个堆叠条形图。我想解释为什么我需要y轴是灵活的

我使用的是d3.js、dc.js和crossfilter.js。数据存储在JSON文件中，并作为源文件包含在html中。既然你有了所有的背景资料，我将提出我的问题

---

如何为此类数据定义图表的维度和组，以创建所需的条形图

也许可以这样做，但如果您可以将数据展平，使每行只有一个值，则会容易得多。由于交叉筛选对行进行筛选，您将无法使用当前数据形状按日期进行筛选。生成多行的问题是，仪表板中的其他图形会多次计算id。我希望所有的图表都来自同一个集合，以便在进行选择时可以相互更新。但是否要按日期筛选？当日期是列时，我看不出你怎么能做到这一点。我不确定，但我想可能有一些技巧可以避免重复计数。我最终通过一些cleaver数据管理解决了我的问题，添加了额外的计数列（以便使用reduceSum而不是reduceCount），谢谢你的建议！也许可以这样做，但如果您可以将数据展平，使每行只有一个值，则会容易得多。由于交叉筛选对行进行筛选，您将无法使用当前数据形状按日期进行筛选。生成多行的问题是，仪表板中的其他图形会多次计算id。我希望所有的图表都来自同一个集合，以便在进行选择时可以相互更新。但是否要按日期筛选？当日期是列时，我看不出你怎么能做到这一点。我不确定，但我想可能有一些技巧可以避免重复计数。我最终通过一些cleaver数据管理解决了我的问题，添加了额外的计数列（以便使用reduceSum而不是reduceCount），谢谢你的建议！