8

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

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

或者

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

根据d3 API，无论 X 是什么，它总是记录 #393b79 这是第一个元素

4

3 回答 3

13

发生这种情况是因为 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))我们将不再将数据附加到分类尺度的范围内，这将导致单色输出。

编辑：修复 jsfiddle 的 URL。

于 2013-12-06T18:47:13.640 回答
8

起初我认为这可能是 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})。

在此处输入图像描述

于 2013-07-10T14:21:40.063 回答
1

您使用的是哪个版本的 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));

结果是：

不同的颜色

于 2013-07-10T13:17:46.267 回答