如何在我使用dc.js设置的特定条件下显示散点图 [英] How to show scatter plot on specific condition which I set using dc.js

问题描述

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

我有如下数据， 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。散点图应该用值着色。

我该怎么做？

解决方案

这是

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

I want a scatter plot composed with a line chart, but I only want the scatter plot to show when the value is not zero.

I have data as below, range of val1 is 0~100, range of val2 is -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
    }
]

I want to show the line chart of val1 every tick and I want to put a scatter plot on top of this line when val2 is -1 or 1, not 0. The scatter plot should be colored by the value.

How can I do it?

解决方案

This is another of those places where a "fake group" can come in handy, because we're both transforming a group (by coloring the dots), and omitting some points.

(Despite the ugly name for this pattern, it's quite powerful to do live transformations of the data after it's been aggregated, and this technique will probably shape future versions of dc.js.)

Crossfilter on indices

First though, we have to use another unusual technique in order to deal with this data, which has no field which corresponds to the X axis. This may or may not come up in your actual data.

We'll define the crossfilter data as the range of indices within the data, and the dimension key as the index:

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

Now whenever we read data, we'll need to use the index to read the original array. So the first group (for the line chart) can be defined like this:

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

Transforming and filtering

Now we get to the heart of the question: how to produce another group which has colored dots for the non-zero val2 values.

Following the "fake group" pattern, we'll create a function which, given a group, produces a new object with a .all() method. The method pulls the data from the first group and transforms it.

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
      })
    }
  }
}

I chose to first transform the data by adding the color field to the value with .map(), and then filter out the zeros with .filter(). Most "fake groups" use one or both of these handy Array methods.

Building the composite

Now we can build a composite chart using a line chart and a scatter plot:

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

Most of this is boilerplate stuff at this point, but note that we have to set both the key and value accessors for the scatterPlot, because it makes unusual assumptions about the key structure which only matter if you want to do rectangular brushing.

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

这篇关于如何在我使用dc.js设置的特定条件下显示散点图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！