需要在饼图中包含负组

Question

我现在有一些不错的图表，但在这里我可能已经咬牙切齿了。我知道您通常不会考虑涉及负面分组的饼图，但请耐心等待。

我有一列值要显示在饼图中。

饼图应该有 2 个元素， 1.正数的平均值 2.负数的平均值

饼图的文本元素应该注意 1. 积极的平均 £?? (?%) 2.负平均£?? (?%)

我不太了解的是饼图如何处理负值。我的饼图没有负元素切片。所以想一想，我能不能只在负数上加入一个-1乘数。

我在想，将正数和负数提取到单独的数组中，用乘法器调整负数数组，然后将这两个数组重新合并回我的饼图中是否会提供一个合理的解决方案？如果它不是太繁琐，我将不胜感激这里的一些流程指导。

我只是期待，例如，平均负值说 20，平均正值 60。百分比显示为 25% 和 75%。我感兴趣的是这两个数字之间的关系。

以上是我所获得的总值。我还需要一些关于如何提取和使用平均值的帮助。

<div id="paybacksplit"></div>

<pre id="data">
Trade,Payback
1,85
2,74
3,-90
4,77
5,93
6,85
7,95
8,98
9,98
10,-88
11,10
12,98
13,93
14,65
15,76
16,81
17,0
18,0
19,96
20,-9
21,96
22,94
23,96
24,94
25,-88
26,8
27,85
28,88
29,90
</pre>

var pbschart = new dc.PieChart("#paybacksplit");

var trades = d3.csvParse(d3.select('pre#data').text());
  trades.forEach(function(x) {
    x.Payback = +x.Payback;
  });

var ndx           = crossfilter(trades),

   tradeDimension    = ndx.dimension(function(d) {
                            if (d.Payback >= 0)
                            return "Profitable";
                            else
                            return "Losing";
                            });
   paybackSumGroup = tradeDimension.group().reduceSum(function(d) {return d.Payback;});


   pbschart
    .width(768)
    .height(480)
    .slicesCap(2)
    .innerRadius(2)
    .dimension(tradeDimension)
    .group(paybackSumGroup)
    .legend(dc.legend().highlightSelected(true))
    .on('pretransition', function(chart) {
        chart.selectAll('text.pie-slice').text(function(d) {
            return d.data.key + '  £ '+ d.data.value + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
        })
    });

   pbschart.render();

jsfiddle 是 here

接下来发生了什么；

Gordons 的回应有所帮助，但我还不够熟练，无法弄清楚下一阶段是 return 平均值。

然而，由于数据来自我自己的数据，我只是重组了输出，为每个项目提供一个包含 Profit/Loss 的列和一个包含值的第二列（负值转换为正值） .

凭借我有限的 dc.js 知识，重新调整我的数据库输出更容易。我最终得到的是

<div id="paybacksplit2"></div>
<!-- here's a way to load data from a jsfiddle, to avoid CORS
  problems - see 
  -->
<pre id="data">
Trade,Payback
Prof,85
Prof,74
Loss,90
Prof,77
Prof,93
Prof,85
Prof,95
Prof,98
Prof,98
Loss,88
Prof,10
Prof,98
Prof,93
Prof,65
Prof,76
Prof,81
Prof,0
Prof,0
Prof,96
Loss,9
Prof,96
Prof,94
Prof,96
Prof,94
Loss,88
Prof,8
Prof,85
Prof,88
Prof,90
</pre>

和

var pbschart2 = new dc.PieChart("#paybacksplit2");

var numberFormat = d3.format("(.2f");

var trades = d3.csvParse(d3.select('pre#data').text());
  trades.forEach(function(x) {
    x.payback = +x.Payback
    x.trade = x.Trade 
    ;
  });

var ndx           = crossfilter(trades),

   tradeDimension    = ndx.dimension(function(d) {return d.trade;});
   paybackSumGroup = tradeDimension.group().reduceSum(function(d) {return d.payback;});

var nameDim = ndx.dimension(function(d) { return d.trade; })
var totalValGroup = nameDim.group().reduce(reduceAddVal, reduceRemoveVal, reduceInitialVal);           

 var result = totalValGroup.top(Infinity);
            console.log(result);

            function reduceAddVal(p, v) {
                ++p.count;
                p.totalVal += v.payback;  
                p.average = p.totalVal / p.count;                                      
                return p;
            }

            function reduceRemoveVal(p, v) {
                --p.count;
                p.totalVal -= v.payback;  
                p.average = p.totalVal / p.count;                                      
                return p;
            }

        function reduceInitialVal() {
            return {
                count: 0,
                totalVal: 0,
                average: 0
            };
        }

 pbschart2
    .width(768)
    .height(200)
    .slicesCap(2)
    .dimension(nameDim)
    .group(totalValGroup)
    .valueAccessor(function (p) {
        return p.value.average;
        })
    .legend(dc.legend().highlightSelected(true))
   .on('pretransition', function(chart) {
        chart.selectAll('text.pie-slice').text(function(d) {
            return '  £ '+ numberFormat(d.data.value.average);
        })
    });   


   pbschart2.render();

这给了我以下信息；

这或多或少是我所追求的。

已更新 fiddle here

也许我可以在 dc.js 中做更多的事情，但由于我可以选择定义我自己的数据提取，这对我来说是目前最简单的选择。

谢谢戈登，我一点一点地做到了！

Answer 1

所有 dc.js 都是不同的 "accessors" 允许您提供的功能

告诉图表如何检索一些数据
也可以对数据进行预计算

在这种情况下 valueAccessor 有帮助：

pbschart
  .valueAccessor(kv => Math.abs(kv.value))

Fork of your fiddle.

需要在饼图中包含负组

Need to include a Negative group in a PieChart

crossfilter

dc.js