javascript - 使用指令范围的 D3 颜色选择器总是返回第一种颜色

Question

我找到了一个 similar question here但答案没有回答任何问题。

我在 AngularJs 指令中使用 D3。该指令(称为 pattern)是使用范围属性 patternIndex 创建的，它与 '=' 绑定(bind)。如果我创建 3 个模式，它们的索引为 0、1、2。在此指令中，我正在绘制圆圈。我希望每个模式实例的圆圈具有不同的颜色。

在我的指令 link() 函数的顶部，我创建了色标。

var color = d3.scale.category10();

然后在 de d3 svg 代码中，我根据称为节点的数据结构绘制圆圈。

var spots = g.selectAll('circle');
spots = spots.data(nodes);
spots.enter().append('circle')
  .style('fill', 'white')
  .attr({
     r: 10,
     cx: function(d) { return d.x; },
     cy: function(d) { return d.y; }
   })
   .attr('stroke', function(d, i) {
     var x = scope.patternIndex;
     console.log('pattern', x, 'color', color(x));
     console.log('circle', i, 'color', color(i));
     return color(i);
   });

问题是这行不通。 color(x) 总是返回第一种颜色。但是，如果我改为使用圆形索引来获取颜色 color(i) ，它就可以正常工作了!所以为了确保 patternIndex 实际上是正确的，我打印了值，这里是 3 个模式的输出，每 4 个圆圈:

pattern 0 color #1f77b4 
circle 0 color #1f77b4
pattern 0 color #1f77b4
circle 1 color #ff7f0e
pattern 0 color #1f77b4
circle 2 color #2ca02c
pattern 0 color #1f77b4
circle 3 color #d62728 
pattern 1 color #1f77b4 
circle 0 color #ff7f0e 
pattern 1 color #1f77b4
circle 1 color #1f77b4 
pattern 1 color #1f77b4 
circle 2 color #2ca02c
pattern 1 color #1f77b4 
circle 3 color #d62728 
pattern 2 color #1f77b4
circle 0 color #ff7f0e
pattern 2 color #1f77b4 
circle 1 color #2ca02c 
pattern 2 color #1f77b4
circle 2 color #1f77b4 
pattern 2 color #1f77b4 
circle 3 color #d62728 

嗯？如您所见，基于模式索引的颜色始终为#1f77b4。

我不明白的另一件事是，第一个“圆圈 0”与第二个和第三个“圆圈 0”不同，但屏幕上的颜色对于 3 个指令实例中的每一个都相同。

我真的很困惑。

Answer 1

问题出在我对 D3 序数尺度的理解上。我在这里找到了答案:

JavaScript/D3: The “same” function call yields different result?

所以发生这种情况的原因是序数尺度在没有给出显式输入域映射的情况下开始根据您在第一次调用时传入的数字进行映射。

var color = d3.scale.category10()

这将创建一个新的原始比例。无论您调用 color(0) 还是 color(4)，它都会返回第一种颜色。 如果参数不同，它会在第二次调用时返回下一个颜色。

在我的例子中，具有模式索引的调用都返回相同的颜色，即使它们是颜色 (0)、颜色 (1) 和颜色 (2)，因为它们是对新比例实例进行的第一次调用。

然后绘制圆圈，它们都以不同的颜色偏移开始，因为每个实例在第一次调用时收到不同的参数，导致每个实例都有不同的输入域映射。

所以为了得到我想要的，我必须像这样声明颜色:

 var color = d3.scale.category10().domain(d3.range(0,10));

我认为文档应该对此发出警告!我很高兴我现在知道它是如何工作的，但它可能会非常困惑。