d3.js - d3.scale.category20b は常に最初の色を返します

Question

d3.scale.category.20b() を使用してカラー スケールを生成しようとしましたが、問題は、要求するリストの数に関係なく、常にリストの最初の要素を返します。

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

また

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))、カテゴリ スケールの範囲にデータが追加されなくなり、単色の出力になります。

_{編集：URLをjsfiddleに修正。}

Answer 2

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

結果は次のとおりです。