DC.JS 堆积条形图颜色

Question

我创建了一个堆积图我的数据如下所示：

[{probability: 0.12 , impact: 27 },
 {probability: 0.22 , impact: 27 },
 {probability: 0.44 , impact: 27 },
 {probability: 0.12 , impact: 28 },
 {probability: 0.31 , impact: 28 },
 {probability: 0.41 , impact: 28 },
...]

影响在 X 轴上，概率在 Y 轴上。

同一个X轴上有很多数据，我不得不计算同一个X的Y轴分量之间的差异。

[{"coordinate":0.027215999999999997,"probability":0.027215999999999997,"impact":23,"stackNumber":0},
{"coordinate":0.01701,"probability":0.01701,"impact":24,"stackNumber":0},
{"coordinate":0.055566000000000004,"probability":0.072576,"impact":24,"stackNumber":1},
{"coordinate":0.015119999999999998,"probability":0.015119999999999998,"impact":25,"stackNumber":0},
{"coordinate":0.03024,"probability":0.04536,"impact":25,"stackNumber":1},
{"coordinate":0.00945,"probability":0.00945,"impact":26,"stackNumber":0},
{"coordinate":0.013229999999999999,"probability":0.02268,"impact":26,"stackNumber":1},
{"coordinate":0.017639999999999996,"probability":0.040319999999999995,"impact":26,"stackNumber":2},
{"coordinate":0.014175,"probability":0.014175,"impact":27,"stackNumber":0},
{"coordinate":0.011024999999999997,"probability":0.025199999999999997,"impact":27,"stackNumber":1},
{"coordinate":0.02016,"probability":0.04536,"impact":27,"stackNumber":2},
{"coordinate":0.015120000000000001,"probability":0.06048,"impact":27,"stackNumber":3},
 ... ]

对于这些数据，我构建了一个维度

 this.demansion = crossData.dimension(function(d) {
    return d.impact
 });

n组

for(let i = 0; i<=this.maxIndex; i++) {
   this.groups.push(this.demansion.group().reduceSum(function(d) {
     return d.stackNumber === i ? d.coordinate : 0
   }))
}

并构建了图表

barChart
      .dimension(this.demansion)
      .group(this.groups[0])
      .width(document.getElementById('main-card').offsetWidth*0.9)
      .height(480)
      .y(d3.scaleLinear().domain([0,self.maxY]))
      .x(d3.scaleLinear().domain([0,45]))
      .centerBar(true)
      .renderHorizontalGridLines(true)

for(let i = 1; i<this.maxIndex; i++) {
        this.barChart.stack(this.groups[i]);
      }

现在我需要根据其值概率为堆栈的每个元素设置颜色，但在 colorAccessor(function(d) { }) 中我有 "coordinate" 值。

我需要什么才能在colorAccessor中得到真正的概率值？

Answer 1

可能最好的方法是减少 coordinate 和 probability。

我认为 reductio 会使这更容易，但使用原始 Crossfilter，这看起来像：

for(let i = 0; i<=this.maxIndex; i++) {
   this.groups.push(this.demansion.group().reduce(
     function(p, v) { // add
       if(v.stackNumber === i) {
         p.coordinate += v.coordinate;
         p.probability += v.probability;
       }
       return p;
     },
     function(p, v) { // delete
       if(v.stackNumber === i) {
         p.coordinate -= v.coordinate;
         p.probability -= + v.probability;
       }
       return p;
     },
     function() { // initialize
       return {coordinate: 0, probability: 0};
     }));
}

然后您将像这样添加值访问器和颜色访问器：

barChart
  .valueAccessor(function(d) { return d.value.coordinate; })
  .colorAccessor(function(d) { return d.value.probability; })

DC.JS 堆积条形图颜色

DC.JS Stacked Bar Chart colors

javascript

d3.js

crossfilter

dc.js

stacked-chart