dc.js散点图按键总结X和Y值

Question

我的数据集大体上是这样的

var records = [
    {name : "A", duration : 1, quantity : 2},
    {name : "A", duration : 2, quantity : 1},
    {name : "B", duration : 1, quantity : 4},
    {name : "A", duration : 3, quantity : 1},
    {name : "B", duration : 1, quantity : 1},
];

使用 dc.js 我正在尝试创建一个散点图，该散点图通过两个值（持续时间和数量）的名称创建总和。因此，在上面的示例中，我希望看到只有两个点的散点图，如下所示：

我在维度或组方面做错了，因为我的 none 个点出现在图中。

var cfilter = crossfilter(records),
    dim     = cfilter.dimension(d => d.name),
    grp     = dim.group().reduce(
        (p, v) => [ p[0] + v.duration, p[1] + v.quantity ],
        (p, v) => [ p[0] - v.duration, p[1] - v.quantity ],
        () => [0, 0]
    );
var chart = dc.scatterPlot("#scatter_plot");
chart
    .dimension(dim)
    .group(grp)
    .x(d3.scaleLinear());

我假设我的 reduce 函数是正确的。至少当我查看 grp.all() 的输出时，数据集似乎已正确汇总。

但如前所述，我的情节仍然是空的。

Answer 1

完成这项工作需要六个小技巧。

首先，我们需要键中的坐标，而不是值中的坐标。我们可以使用 "fake group" 动态翻转键和值：

function flip_key_value(group) {
  return {
    all: () => group.all().map(({key, value}) => ({key: value, value: key}))
  };
}

chart
  .group(flip_key_value(grp))

接下来，我们需要根据值（现在的名称）映射颜色：

chart
  .colorAccessor(({value}) => value)

我们需要设置两个尺度，使用弹性和填充（为了方便），并设置轴标签：

chart
  .x(d3.scaleLinear())
  .y(d3.scaleLinear())
  .elasticX(true).elasticY(true)
  .xAxisPadding(0.25).yAxisPadding(0.25)
  .xAxisLabel('duration').yAxisLabel('quantity')

最后，我们需要设置一个自定义的.legendables()方法，因为默认情况下图例会为一个系列图表显示不同的系列，但我们希望每个点都有自己的颜色：

chart.legendables = () => chart.group().all()
    .map(({key, value}) => ({chart, name: value, color: chart.colors()(value)}));

请注意，我们设置的颜色与上面指定的 colorAccessor 一致。

最后，设置边距以适合右边的图例，并声明图例：

chart
  .margins({left: 35, top: 0, right: 75, bottom: 30})
  .legend(dc.legend().x(425).y(50));

屏幕截图（我想你在你想要的输出中翻转了 Xs 和 Ys）：

Fiddle demo.

实施过滤

在 dc.js 和 crossfilter 中，过滤的工作原理是在用户进行选择时在维度上设置过滤器。

由于我们更改了键，现在维度与正在显示的组数据不一致，选择将导致无效的过滤操作，导致其他图表的所有数据被删除。

为了纠正这个问题，我们可以搜索落在矩形选择范围内的任何点，并按原始键过滤，这些键现在是值：

chart.filterHandler((dimension, filters) => {
  if(filters.length === 0) {
    dimension.filter(null);
    return filters;
  }
  console.assert(filters.length && filters[0].filterType === 'RangedTwoDimensionalFilter');
  const filterFun = filters[0].isFiltered;
  const itemsInside = chart.group().all().filter(({key}) => filterFun(key));
  const origKeys = itemsInside.map(({value}) => value);
  if(origKeys.length === 1)
    dimension.filterExact(origKeys[0]);
  else
    dimension.filterFunction(k => origKeys.includes(k));
  return filters;
});

New fiddle version, with working selection.

dc.js散点图按键总结X和Y值

dc.js Scatter Plot sum up X and Y values by key

javascript

dc.js

实施过滤