Javascript 使用指令作用域的D3颜色选择器始终返回第一种颜色

我找到了一个答案，但答案什么都没有

我在AngularJs指令中使用D3。此指令（称为pattern）是使用范围属性patternIndex创建的，该属性与“=”绑定。如果我创建3个模式，它们的索引为0,1,2。在这个指令里，我画的是圆圈。我希望每个图案实例的圆具有不同的颜色

在directive link（）函数的顶部，我创建了色阶

var color=d3.scale.category10（）

然后在ded3svg代码中，我基于一个称为节点的数据结构绘制了圆圈

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

问题是这不起作用<代码>颜色（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个指令实例中的每一个都是相同的

---

我真的很困惑。

问题在于我对D3s顺序量表的理解。我在这里找到了答案：

因此，发生这种情况的原因是，在没有给出显式输入域映射的情况下，顺序缩放开始基于第一次调用时传入的数字进行映射

var color = d3.scale.category10()

这将创建一个新的原始比例。它将返回您称为颜色（0）或颜色（4）的第一种颜色。如果参数不同，则在第二次调用时返回下一种颜色

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

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

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

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

---

我想医生们应该对此提出警告！很高兴我现在知道了它是如何工作的，但它可能会非常混乱。

patternIndex的类型是什么patternIndex您确定它不是字符串吗？尝试执行

var x=parseInt（scope.patternIndex）是的，我肯定这是一个数字。我用typeof来确认。