如何使用带值的向量为散点图着色？

Question

好吧，我想使用带有值的向量为我的散点图着色。实际上，我想使用其他维度而不是用于创建散点的维度。

使用这些线，它使用散点图所基于的维度给出的值为我的散点图赋予颜色。

              .colorAccessor(function(d) {return d.key[1]})  
              .colors(d3.scaleSequential(d3.interpolateOranges))
              .colorDomain(y_range)

              y_range = [y_min, y_max]

我试图在散点图的维度中包含颜色列，但它减慢了过滤过程。像这样：

scatterDim = crossFilter.dimension(function(d) { return [d[it.variable[0]], d[it.variable[1]], d[it.color]]}) 

              .colorAccessor(function(d) {return d.key[2]})  
              .colors(d3.scaleSequential(d3.interpolatePlasma))
              .colorDomain([colorUnits[0], colorUnits[colorUnits.length - 1]]),

我想要颜色的不同维度：

        colorDimension = crossFilter.dimension(function (d) { return d[it.color] }),
        colorGroup = colorDimension.group().reduceCount(),
        colorAll = colorGroup.all(),

        colorUnits = [],
        count = 0;

        for(var color in colorAll)
        {
          colorUnits[count] = colorAll[color].key;
          count++;
        }

        .colorAccessor(//some different code for my vector colorUnits or even for dimension?!//)  
        .colors(d3.scaleSequential(d3.interpolatePlasma))
        .colorDomain([colorUnits[0], colorUnits[colorUnits.length - 1]]),

我也想知道如何使用 scaleOrdinal 来显示颜色。如果向量 colorUnits 包含字符串。

Answer 1

名字"dimension"在crossfilter和dc.js中有点混乱。它不用于描述 "Y"（聚合）值或颜色。

真正的意思是，"I want to bin my data by this key, and filter on it."

在许多示例中，您会发现颜色作为维度键中的第三个元素的原因是它很方便。更改键比更改聚合值更容易。但这并没有什么意义。

当您向维度键添加颜色时图表变慢这一事实告诉我您没有为每个 X/Y 对设置唯一的颜色。不是为每个 X/Y 对画一个点，而是为每个 X/Y/颜色三元组画一个点。

您也不需要创建单独的颜色维度，除非您想要对颜色进行分类、聚合或过滤。

假设每 X/Y 对只需要一个点，您需要决定使用哪种颜色。然后您可以更改 reduction，而不是密钥，以添加此数据：

scatterDim = crossFilter.dimension(function(d) {
  return [d[it.variable[0]], d[it.variable[1]]];
}),
scatterGroup = scatterDim.group().reduce(
  function(p, v) { // add
    p.count++; // reduceCount equivalent
    p.color = combine_colors(p.color, v[it.color]);
    return p;
  },
  function(p, v) { // remove
    p.count--;
    // maybe adjust p.color
    return p;
  },
  function() { // init
    return {count: 0, color: null};
  }
);

如果您不关心使用哪种颜色，则不需要combine_colors；只需使用 v[it.color]。否则，这是您需要根据您的应用程序来决定的事情。

现在散点组有对象作为其值，您可以更改散点图以利用它们：

scatterPlot
  .existenceAccessor(d => d.value.count) // don't draw dot when it is zero
  .colorAccessor(d => d.value.color)

如果你确实想用不同的颜色绘制所有的点，例如使用不透明度来允许过度绘制，你可能需要一个 canvas 散点图的实现，因为 SVG 只适用于数千点。 There is one in the works for dc.js但需要移植到最新的API。

I would also like to know how to use scaleOrdinal for color. In case that the vector colorUnits contains strings.

不确定你的意思。 scaleOrdinal 以字符串为域，所以

.colors(d3.scaleOrdinal(colorUnits, output_colors))

应该可以吗？

例子

由于我无法传达某些东西，这里有一个例子。颜色字符串来自数组，因为我没有您的数据或代码示例：

const names = ["Zero", "One", "Two", "Three", "Four", "Five"];
  speedSumGroup       = runDimension.group()
    .reduce(
      function(p, v) { // add
        p.count++; // reduceCount equivalent
        p.color = names[+v.Expt];
        return p;
      },
      // ... as before
    );

chart
  .colorAccessor(d => d.value.color)
  .colors(d3.scaleOrdinal(names, d3.schemeCategory10))

再次重申，如果该方法对您不起作用，最好的解决方法是记录 speedSumGroup.all()。我得到：

[
  {
    "key": [
      1,
      850
    ],
    "value": {
      "count": 1,
      "color": "One"
    }
  },
  {
    "key": [
      1,
      880
    ],
    "value": {
      "count": 1,
      "color": "Three"
    }
  },
  {
    "key": [
      1,
      890
    ],
    "value": {
      "count": 2,
      "color": "Five"
    }
  },
  // ...
]

Example fiddle.

如何使用带值的向量为散点图着色？

How can I color my scatter using a vector with values?

crossfilter

dc.js

例子