javascript - この塗りつぶし関数はどこで定義されていますか?

Question

例では、http://mbostock.github.com/d3/ex/bubble.html :

27 行目:

.style("fill", function(d) { return fill(d.packageName); });

どこでfill()定義されていますか？どちらにも見つかりませんでしたd3.js。また、パッケージ名が色でなくても、ランダムな色が割り当てられています。どうして？

Answer 1

リンクしたスニペットの一番上を見てください。

var r = 960,
    format = d3.format(",d"),
    fill = d3.scale.category20c();

その 3 行目fillは が定義されている場所です。ここでドキュメントを見つけることができますcategory20c：

https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-category20

Answer 2

ソースコードは d3.v2.js の 2997 行目から:

d3.scale.category20c = function() {
  return d3.scale.ordinal().range(d3_category20c);
};

呼び出している:

// lines 2894-2896
d3.scale.ordinal = function() {
  return d3_scale_ordinal([], {t: "range", x: []});
};

次に呼び出す

// lines 2903-2905
function scale(x) {
    return range[((index.get(x) || index.set(x, domain.push(x))) - 1) % range.length];
}

渡されたパラメーターは、以下に示す 20 の使用可能な色のリストから色を割り当てるxように設定されd3_category20cます。

["#3182bd", "#6baed6", "#9ecae1", 
"#c6dbef", "#e6550d", "#fd8d3c", 
"#fdae6b", "#fdd0a2", "#31a354", 
"#74c476", "#a1d99b", "#c7e9c0", 
"#756bb1", "#9e9ac8", "#bcbddc", 
"#dadaeb", "#636363", "#969696", 
"#bdbdbd", "#d9d9d9"]

コードをステップ実行すると、(渡されたカテゴリに基づいて) 次のように割り当てられた色が表示されます。

cluster = 0 #3182bd
graph = 1 #6baed6
optimization = 2 #9ecae1
animate = 3  #c6dbef
interpolate = 4 #e6550d
converters = 5 #fd8d3c
data = 6 #fdae6b
display = 7 #fdd0a2
flex = 8 #31a354
physics = 9  #74c476
query = 10 #a1d99b
methods = 11 #c7e9c0
scale = 12 #756bb1
util = 13 #9e9ac8
heap = 14 #bcbddc
math = 15 #dadaeb
palette = 16 #636363
axis = 17 #969696
controls = 18 #bdbdbd
render = 19 #d9d9d9
events = 0 #3182bd
legend = 1 #6baed6
etc...

mod 演算子を使用しているため、渡されたカテゴリの数が 20 色の範囲を超えた場合でも色を割り当て続けることができます。

の色は、 category.jsd3_category20cの 48 ～ 54 行で定義されていることに注意してください。

Answer 3

すでに述べたように、このコード:

var r = 960,
    format = d3.format(",d"),
    fill = d3.scale.category20c();

fill() を定義します。ドキュメントと参照カードの次の便利な組み合わせを追加したいだけです。