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的未来版本。）

指数上的Crossfilter

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

我们将crossfilter数据定义为数据中的索引范围，并将维度键定义为索引：

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只有在你想要进行矩形刷时才有意义。

小提琴：https://jsfiddle.net/gordonwoodhull/6cm8bpym/17/

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

1 个答案:

指数上的Crossfilter

转换和过滤

构建复合