Question

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

我在AngularJs指令中使用D3。该指令（称为模式）是使用范围属性patternIndex创建的，该属性与＆＃39; =＆＃39;绑定。如果我创建3个模式，他们有索引0,1,2。在这个指令中，我画了圈子。我希望每个模式实例的圆圈都有不同的颜色。

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

var color = d3.scale.category10();

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

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。

我不能得到的另一件事是第一个＆＃34;圈0＆＃34;不同于第二个和第三个＆＃34;圈0＆＃34;，但屏幕上的颜色对于3个指令实例中的每一个都显示相同。

我真的很困惑。

Answer 1

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

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

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

var color = d3.scale.category10()

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

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

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

所以为了获得我想要的东西，我必须声明这样的颜色：

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

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

使用指令范围的D3颜色选择器始终返回第一颜色

1 个答案: