Question

我的问题与此处发布的问题非常相似：how to create multiline chart using 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中。现在您已掌握了所有背景信息，我会问我的问题。

如何为此类数据定义图表的维度和组以创建我想要的条形图？

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

0 个答案: