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

在交叉过滤器和dc.js中，名称“ dimension”有点混乱。它不用于描述“ Y”（汇总）值或颜色。

它的真正意思是，“我想通过此键对数据进行装箱并对其进行过滤。”

在许多示例中，将颜色作为尺寸标注中的第三个元素的原因是它很方便。更改键比聚合值更容易。但这真的没有道理。

向维键添加颜色时，图表变慢的事实告诉我，每个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)

实际上，如果您确实想用不同的颜色绘制所有点，例如使用不透明度允许过度绘图，则可能需要使用散点图的画布实现，因为SVG最多可以容纳数千个点。 There is one in the works for dc.js，但需要将其移植到最新的API。

我还想知道如何将scaleOrdinal用于颜色。如果向量colorUnits包含字符串。

不确定您的意思。 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。

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

1 个答案:

示例