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) { })我有＆＃34;坐标＆＃34;值。

在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堆积条形图颜色

1 个答案: