气泡图和行图不同步，dc.js

Question

有一个简单的气泡图（维度1，维度2）和折线图（维度level_1）看 https://codepen.io/shakraz/pen/dyYXxJy

    var houseDim = ndx.dimension(d=>[d.district, d.name, d.price, d.flat_rate, d.building_rate]); 
var districtDim = ndx.dimension(d=>[d.district])

当我点击行图时，我希望只看到过滤后的气泡，对吗？但它不起作用。但反之亦然，点击气泡过滤器行图，这是为什么呢？可以肯定的是，它与 reduce 函数有某种关联。感谢您的任何预付款。

Answer 1

最好在交叉过滤器组的 value 部分保留任何 measures，只保留 index 在 key.

Crossfilter 将根据分组和维度键函数对分组进行分组。您的直觉是正确的，您应该能够使用 d.name，因为您希望每行数据有一个气泡，而 d.name 是唯一键。

var houseDim = ndx.dimension(d=>d.name);

这是将每一行复制到组值中的一种简单方法：

var houseGroup=houseDim.group().reduce(
  (p, d) => ({...p, ...d, count: (d.count || 0) + 1}), // add
  (p, d) => ({...p, count: p.count - 1}), // remove
  ()  => {} // init
);

添加一行时，它会从该行复制数据，添加一个名为count的字段。由于键是唯一的，因此计数将为 1 或 0，具体取决于该行是被滤入还是滤出。

现在我们可以在代码中使用描述性字段名称而不是索引数组：

.keyAccessor(function (p) {
  return p.value.flat_rate;
})

.valueAccessor(function (p) {
  return p.value.building_rate;
})
// ...
.title(function (p) {
   return p.key + "\n"
   + "Индекс квартиры: " + p.value.flat_rate + "\n"
   + "Индекс дома: " + p.value.building_rate + " \n"
   + "Район: " + p.value.district + "\n"
   + "Цена: " + p.value.price
})

我们还需要通过在某些访问器中使用 d.value.count 对被排除在外进行可视化编码。我喜欢将半径和不透明度都设为零，但保留半径并仅使用不透明度也有平静的效果。

.radiusValueAccessor(function (p) {
  console.log('radius', p)
  return p.value.count * priceScale(p.value.price);
})
// .colors(colorScale)
// .colorAccessor(function(p) {return p.value.district})
.colorCalculator(p => p.value.count ? colorScale(p.value.district) : 'rgba(0,0,0,0)')

气泡图不在其 public api 中公开不透明度，但是当 count 为 0 时，此 colorCalculator 技巧将不透明度发送为零，并调用普通 colorScale 否则就值。

我还必须指出更正 dc.css URL 以使选择行为起作用。

<link rel="stylesheet" href="https://unpkg.com/dc/dist/style/dc.css">

Working fork of your codepen

气泡图和行图不同步，dc.js

Bubble chart and rowchart are not sync, dc.js

reduce

dc.js