這個填充函數在哪裏定義？

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

這第三行是fill被定義。您可以在文檔的category20c這裏：

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

Answer 2

的源代碼是線2997-上d3.v2.js：

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]; 
} 

（基於通過了類別

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

通過我看到這樣分配的顏色代碼步進：

參數傳入，x設置爲d3_category20c其從下方觀察的20種可用的顏色的列表分配顏色在）：

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種的色彩範圍。

請注意，d3_category20c的顏色在category.js的第48-54行中定義。

Answer 3

如已經提到的，這樣的代碼：

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

定義填充（）。我只是想添加以下方便的文件和參考卡組合：