如何在我使用 dc.js 设置的特定条件下显示散点图

Question

我想要一个由折线图组成的散点图，但我只希望散点图在值不为零时显示。

我有如下数据，val1的范围是0~100, val2的范围是-1, 0, 1

[
    {
        val1: 10,
        val2: 0
    },
    {
        val1: 20,
        val2: 1
    },
    {
        val1: 30,
        val2: -1
    },
    {
        val1: 40,
        val2: -1
    },
    {
        val1: 50,
        val2: 1
    },
    {
        val1: 60,
        val2: 0
    },
    {
        val1: 70,
        val2: 0
    },
    {
        val1: 80,
        val2: 1
    },
    {
        val1: 90,
        val2: 1
    },
    {
        val1: 100,
        val2: 1
    }
]

我想在每个报价单上显示 val1 的折线图，并且当 val2 是 -1 或 [=19= 时，我想在这条线的顶部放一个散点图]，而不是 0。散点图应按值着色。

我该怎么做？

Answer 1

这是另一个 "fake group" 可以派上用场的地方，因为我们都在转换一个组（通过给点着色），并省略一些点。

（尽管此模式的名称很丑陋，但在聚合后对数据进行实时转换非常强大，并且此技术可能会影响 dc.js 的未来版本。）

索引上的交叉过滤器

不过，首先，我们必须使用另一种不寻常的技术来处理这些数据，它没有对应于 X 轴的字段。这可能会也可能不会出现在您的实际数据中。

我们将交叉过滤器数据定义为数据中的索引范围，并将维度键定义为索引：

var ndx = crossfilter(d3.range(experiments.length)),
    dim = ndx.dimension(function(i) { return i; }),

现在我们每次读取数据时，都需要使用索引来读取原始数组。所以第一组（对于折线图）可以这样定义：

    group1 = dim.group().reduceSum(function(i) { return experiments[i].val1; });

转换和过滤

现在我们进入问题的核心：如何生成另一个具有非零 val2 值的彩色点的组。

按照 "fake group" 模式，我们将创建一个函数，给定一个组，使用 .all() 方法生成一个新对象。该方法从第一组中提取数据并对其进行转换。

function keep_nonzeros(group, field2) {
  return {
    all: function() {
      return group.all().map(function(kv) {
        return {
          key: kv.key,
          value: {
            y: kv.value,
            color: experiments[kv.key][field2]
          }
        }
      }).filter(function(kv) {
        return kv.value.color != 0
      })
    }
  }
}

我选择首先通过将颜色字段添加到具有 .map() 的值来转换数据，然后使用 .filter() 过滤掉零。大多数 "fake groups" 使用这些方便的 Array 方法中的一种或两种。

构建组合

现在我们可以使用折线图和散点图构建复合图表：

  chart
    .width(600)
    .height(400)
    .x(d3.scale.linear())
    .xAxisPadding(0.25).yAxisPadding(5)
    .elasticX(true)
    .compose([
      dc.lineChart(chart).group(group1),
      dc.scatterPlot(chart).group(keep_nonzeros(group1, 'val2'))
         // https://github.com/dc-js/dc.js/issues/870
         .keyAccessor(function(kv) { return kv.key; })
         .valueAccessor(function(kv) { return kv.value.y; })
         .colorAccessor(function(kv) { return kv.value.color; })
         .colors(d3.scale.ordinal().domain([-1,1]).range(['red', 'black']))
    ]);

此时大部分是样板文件，但请注意，我们必须为散点图设置键和值访问器，因为 it makes unusual assumptions about the key structure 只有当你想进行矩形刷亮时才重要。

Fiddle: https://jsfiddle.net/gordonwoodhull/6cm8bpym/17/

如何在我使用 dc.js 设置的特定条件下显示散点图

How to show scatter plot on specific condition which I set using dc.js

dc.js

索引上的交叉过滤器

转换和过滤

构建组合