D3 常用顏色類型

D3 v3.x 常用顏色套用方式:

var color = d3.scale.category10();	// 選擇顏色類型

svg.append("rect")
	.attr("x", 5).attr("y", 5)
	.attr("width", 50).attr("height", 50)
	.style("fill", color(3));	// 使用顏色 3

D3 v4.x / v5.x 常用顏色套用方式:

var color = d3.scaleOrdinal(d3.schemeCategory10);	// 選擇顏色類型

svg.append("rect")
	.attr("x", 5).attr("y", 5)
	.attr("width", 50).attr("height", 50)
	.style("fill", color(3));	// 使用顏色 3

D3 v3.x 與 v4.x / v5.x 的常用顏色等效類型對應:

  • d3.scale.category10 → d3.schemeCategory10
  • d3.scale.category20 → d3.schemeCategory20
  • d3.scale.category20b → d3.schemeCategory20b
  • d3.scale.category20c → d3.schemeCategory20c
  • 詳細色階參考:

  • D3 v3.x 版本: https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md
  • D3 v4.x 版本: https://github.com/d3/d3-scale-chromatic/blob/master/README.md
  • 發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *