dc.js - 如何在我使用 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< 时，我想在这条线的顶部放置一个散点图 或 1，而不是 0。散点图应按值着色。

我该怎么做？

Answer 1

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

(尽管这种模式的名字很难听，但它在聚合后对数据进行实时转换非常强大，并且这种技术可能会塑造 dc.js 的 future 版本。)

索引交叉过滤

首先，我们必须使用另一种不寻常的技术来处理这些数据，该数据没有对应于 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 值的彩色点的组。

按照“假组”模式，我们将创建一个函数，给定一个组，该函数使用 .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() 过滤掉零。大多数“假组”使用这些方便的数组方法中的一种或两种。

构建组合

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

  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']))
    ]);

此时大部分内容都是样板内容，但请注意，我们必须为 scatterPlot 设置键和值访问器，因为 it makes unusual assumptions about the key structure仅当您想要进行矩形刷牙时，这才重要。

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