dc.js气泡图分组异常：筛选操作导致数据错误移除

我注意到你的核心问题是：当用饼图基于filterColumn筛选时，气泡图的分组数据出现了错误的添加/移除行为。这其实是因为你的分组逻辑和气泡图的维度特性不匹配导致的——你的气泡图维度identifier1是唯一字段（每个值对应单条数据），但你却用了累加型的reduce函数，这完全不符合唯一维度的需求。

问题根源拆解 #

你当前的reduceFieldsAdd/reduceFieldsRemove是对xVal、yVal、rVal做加减累加，但每个identifier1只对应一条数据。当筛选触发时，同一键下的数值会被无意义地重复加减，最终导致分组数据混乱。正确的逻辑应该是：当数据被纳入筛选结果时，直接赋值对应字段值；当被排除时，重置这些值。

修正后的代码实现 #

替换你的reduce函数部分为以下代码，适配唯一维度的场景：

// 针对唯一维度的reduce逻辑：添加时直接赋值字段，移除时清空
function reduceUniqueAdd(fields) {
  return function(p, v) {
    fields.forEach(function(f) {
      p[f] = v[f]; // 直接赋值，而非累加
    });
    return p;
  };
}

function reduceUniqueRemove(fields) {
  return function(p, v) {
    fields.forEach(function(f) {
      p[f] = 0; // 移除时重置为0，确保气泡不会显示
    });
    return p;
  };
}

function reduceUniqueInitial(fields) {
  return function() {
    var ret = {};
    fields.forEach(function(f) {
      ret[f] = 0;
    });
    return ret;
  };
}

var fieldsToReduce=['xVal', 'yVal', 'rVal'];
var bubbleChartGroup = bubbleChartDim.group().reduce(
  reduceUniqueAdd(fieldsToReduce),
  reduceUniqueRemove(fieldsToReduce),
  reduceUniqueInitial(fieldsToReduce)
);

额外注意事项 #

• 因为identifier1是唯一字段，每个分组键只会对应一条数据，所以不需要任何累加操作，直接赋值就能准确反映当前筛选后该记录的字段值。
• 移除时重置为0是为了让气泡图在该记录被筛选掉时，自动隐藏对应的气泡（如果需要处理空值，也可以将重置值设为null，但要确保accessor函数能正确识别）。
• 气泡图的keyAccessor、valueAccessor等配置可以保持不变，依然从p.value中读取字段值即可。

这样修改后，当你通过饼图进行筛选时，气泡图的分组数据就会正确响应筛选操作，不会再出现数值错误累加的问题。

内容的提问来源于stack exchange，提问作者godpebernsem