加入了所有值的饼图

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 方面走在了正确的轨道上，它非常适合根据当前过滤器计算行数（或字段总和）。只缺少两部分：

查找未应用过滤器的完整总数
以正确的格式放置数据以供饼图读取

这种预处理很容易用 fake group 来完成，它会随着过滤器的变化而调整。

这是一种方法：

// 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 而为空，并且在这种情况下不会尝试替换它。

Example fiddle based on your code.

加入了所有值的饼图

PieChart with all values joined

crossfilter

dc.js