dc.js 散点图通过键 实施过滤

如何解决dc.js 散点图通过键 实施过滤

我的数据集一般是这样的

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

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

我在维度或组方面做错了什么，因为我的点都没有出现在图中。

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() 的输出时，数据集似乎总结正确。

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

解决方法

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

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

function onEdit() {

var spreadsheet = SpreadsheetApp.getActive();
var sheet = spreadsheet.getActiveSheet();
var cell =  sheet.getActiveCell();

var row = cell.getRow();
var column = cell.getColumn();


if ( row ===1 && column ===4 && sheet.getName() ==="Hoja 1" ) {

  sendData();
  
  //sheet.getRange(1,1).setValue("5");
}

function sendData() {

  var sheet = SpreadsheetApp.openById("1pxS9F9YEagzzRyTOqIDGVpDaCEiY_Z1DOYxq1QVzWGk");

  var source_sheet = sheet.getSheetByName("Hoja 1");
  var target_sheet = sheet.getSheetByName("Hoja 2");
  
  var range1 = source_sheet.getRange(1,7,6,1).getValues();
  
  target_sheet.getRange(1,1,1).setValues(range1);
}

}

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

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

屏幕截图（我认为您在所需的输出中翻转了 Xs 和 Ys）：

Fiddle demo。

实施过滤

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

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

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

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

New fiddle version,with working selection。