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

Question

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

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

要么

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

根据d3 API,无论X是什么,它总是记录#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)),我们将不再有将数据追加到分类量表的范围,这将导致一个单彩色输出.

_{编辑:将URL修复为jsfiddle.}

Answer 2

起初我认为这将是D3.js的一个错误所以创建这个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版本提出过这个问题.这似乎不太可能是您的问题的原因,因为有问题的代码几乎没有被触及.如果代码没有被触及太多而其他代码没有问题,则会引发浏览器兼容的问题.我将我的jsfiddle发送到browsershots并且没有看到任何浏览器输出单个颜色块而不是预期的漂亮颜色条纹.

在所有这些接缝之后,没有足够的信息来正确回答你的问题.我建议您通过对代码进行一些小改动来查看X是否真的在改变console.log({'color':color(X), 'x':X}).