d3.scale.category20b总是返回第一种颜色

Question

我尝试使用d3.scale.category.20b（）生成颜色比例，问题是我要求的列表的任何数量，它总是返回列表的第一个元素。

var color = d3.scale.category20b();
console.log(color(X));

OR

console.log(d3.scale.category20b()(X);

无论X是什么，根据d3 API

，它总是记录＃393b79这是第一个元素

Answer 1

这可能发生，因为当新数据进入时，d3中的分类比例会附加到域中。如果每个enter（）都创建一个新的分类比例，则分类比例的域保持不变。

作为一个例子，请考虑这个jFiddle：http://jsfiddle.net/seldomawake/MV55j/1/ 在这里，我们看到随着数据的输入，我们在全局命名空间$colorScale（下面的具体代码）中附加了一个分类比例。

function redraw(theData) {
    var localColorScale = d3.scale.category20c(); //< NOT USED HERE
    var svg = d3.select("svg");
    var circles = svg.selectAll("circle")
                     .data(theData).enter().append("circle")
     var circleAttributes = circles.attr("cx", getRandomInt(50, 450))
                                   .attr("cy", getRandomInt(50, 450))
                                   .attr("r", function (d) { return d.value; })
                                   .style("fill", function () { return $colorScale(getRandomInt(0, 19)); });
}

但是，如果我们要将return $colorScale(getRandomInt(0, 19))替换为return localColorScale(getRandomInt(0, 19))，我们将不再将数据附加到分类比例的范围，这将导致单色输出。< / p>

_{编辑：将网址修复为jsfiddle。}

Answer 2

起初我认为这将是D3.js创建的this jsfiddle的错误，它可以正常工作。

var data = d3.range(0,20);
var color = d3.scale.category20b();

d3.select('.target').selectAll('div')
    .data(data)
    .enter()
        .append('div')
        .text(function(d){return color(d);})
        .attr('style', function(d){return "background-color:"+ color(d) + ";" ;})

其他人对你正在使用的D3版本提出过这个问题。这看起来不太可能是您的问题的原因，因为code in question几乎没有被触及。如果代码没有被触及太多而其他代码没有问题，则会引发浏览器兼容的问题。我sent my jsfiddle to browsershots并且没有看到任何浏览器输出单个颜色块而不是预期的漂亮颜色条纹。

在完成所有这些接缝之后，没有足够的信息来正确回答您的问题。我建议您通过对代码console.log({'color':color(X), 'x':X})进行少量更改来查看X是否真的发生了变化。

Answer 3

您使用的是哪个版本的D3？我写了jsFiddle（D3 3.0.4），颜色正常显示：

var color = d3.scale.category20b();

var svg = d3.select('#chart').append('svg')
    .attr('width', 200)
    .attr('height', 100);

svg.append('rect')
    .attr('width', 100)
    .attr('height', 100)
    .attr('fill', color(0));

svg.append('rect')
    .attr('x', 100)
    .attr('width', 100)
    .attr('height', 100)
    .attr('fill', color(1));

结果是：