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. Я должен был вычислить разность между компонентами Y-оси X. же

[{"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 
}); 

и п групп

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) { }) У меня есть значение «координаты».

Что мне нужно для получения реальной вероятности в 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; })