包含所有值的PieChart

Question

我是新手，正在使用仪表板。 我想用饼图显示一维的总值（所有寄存器全部选中时为100％，并使用其他过滤器进行更改）。 我已经用groupAll（）尝试过了，但是没有用。 此代码有效，但显示了单独的组。 我怎样才能做到这一点？ 非常感谢！！！

CSV

CausaRaiz,probabilidad,costeReparacion,costePerdidaProduccion,impacto,noDetectabilidad,criticidad,codigo,coste,duracion,recursosRequeridos
PR.CR01,2,1.3,1,1,1,2,AM.PR.01,1,2,Operarios
PR.CR02,4,2.3,3,2.5,2,20,AM.PR.02,2,3,Ingenieria
PR.CR03,4,3.3,4,3.5,4,25,AM.PR.03,3,4,Externos
PR.CR04,2,2.7,2,2,2,8,AM.PR.04,3,4,Externos
FR.CR01,3,2.9,3,2.5,3,22,AM.FR.01,4,5,Ingenieria
FR.CR02,2,2.1,2,2,2,8,AM.FR.02,4,3,Operarios
FR.CR03,1,1.7,1,1,1,1,AM.FR.03,3,5,Operarios
RF.CR01,1,1.9,2,2,3,6,AM.RF.01,3,5,Externos
RF.CR02,3,3.5,4,3.5,4,20,AM.RF.02,4,4,Ingenieria
RF.CR03,4,3.9,4,3.5,4,25,AM.RF.03,4,5,Operarios

代码工作

var pieCri = dc.pieChart("#criPie")
var criDimension = ndx.dimension(function(d) { return +d.criticidad; });
var criGroup =criDimension.group().reduceCount();
pieCri
            .width(270)
            .height(270)
            .innerRadius(20)
            .dimension(criDimension)
            .group(criGroup)
            .on('pretransition', function(chart) {
                chart.selectAll('text.pie-slice').text(function(d) {
                    return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
                })
            });
pieCri.render();

我可以用数字显示总百分比：

var critTotal = ndx.groupAll().reduceSum(function(d) { return +d.criticidad; });
var numbCriPerc = dc.numberDisplay("#criPerc");    
numbCriPerc
            .group(critTotal)
            .formatNumber(d3.format(".3s"))
            .valueAccessor( function(d) { return d/critTotalValue*100; } );

但是我更喜欢在饼图中显示所有寄存器和选择之间的差异。

Answer 1

如果我正确理解了您的问题，则想显示一个饼图，其中包含两个切片：包含的项目数和排除的项目数。

使用groupAll使您处在正确的轨道上，这对于根据当前过滤器计算行数（或字段总和）非常有用。 仅缺少两个部分：

• 查找未应用过滤器的总计
• 以正确的格式放置数据，以便饼图读取

使用假组确实很容易进行这种预处理，它会随着过滤器的更改而适应。

这是一种实现方法：

// takes a groupAll and produces a fake group with two key/value pairs:
// included: the total value currently filtered
// excluded: the total value currently excluded from the filter
// "includeKey" and "excludeKey" are the key names to give to the two pairs
// note: this must be constructed before any filters are applied!
function portion_group(groupAll, includeKey, excludeKey) {
  includeKey = includeKey || "included";
  excludeKey = excludeKey || "excluded";
  var total = groupAll.value();
  return {
    all: function() {
      var current = groupAll.value();
      return [
        {
            key: includeKey,
          value: current
        },
        {
            key: excludeKey,
          value: total - current
        }
      ]
    }
  }
}

您将构造一个groupAll以在当前过滤器下找到总数：

var criGroupAll = criDimension.groupAll().reduceCount();

您可以在将假组传递到图表时构造它：

        .group(portion_group(criGroupAll))

注意：以这种方式构造假组时，您必须没有活动的过滤器，因为它会在那时捕获未过滤的总数。

最后，我注意到您自定义饼图标签的方式将显示它们，即使切片为空。 在此示例中，这看起来特别糟糕，因此我将其固定为：

        .on('pretransition', function(chart) {
            chart.selectAll('text.pie-slice').text(function(d) {
                return d3.select(this).text() && (d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%');
            })

        });

这将检测标签文本是否由于minAngleForLabel而为空，并且在这种情况下不会尝试替换它。

示例示例根据您的代码 。