[D3] D3 Scales

D3 Scales

Quantitative Scales: for continuous input domains, such as numbers.

  • Linear Scales
  • Power Scales
  • Log Scales
  • Quantize Scales
  • Quantile Scales
  • Threshold Scales

Oridinal Scales: for discrete input domains, such as names or categories.

  • Oridinal Scales
  • Categorical Colors
  • ColorBrewer

Time Scales: for time domains.

  • Time Scales

D3 Linear Scale

Linear Scale:  y = mx + b

D3 Linear Scale Domain 和 D3 Linear Scale Range

d3.scale.linear().domain([0, 400]).range([0, 200]);

// 範例:
var scaleUp = d3.scale.linear().domain([0, 10]).range([0, 100]);
typeof(scaleUp);
// 回傳:"function"
[scaleUp(1), scaleUp(5), scaleUp(8), scaleUp(10)];
// 回傳:[10, 50, 80, 100]

SVG Container and D3 Scales

<svg width="200" height="200">
myData = [{"n": 0, "p": 0},
          {"n": 200, "p": 200},
          {"n": 300, "p": 300},
          {"n": 400, "p": 400}];

domainN = d3.extent(myData, function(d){ return d.n; });
domainP = d3.extent(myData, function(d){ return d.p; });

rangeSVGX = [0, 200];
rangeSVGY = [0, 200];

var xLineScale = d3.scale.linear().domain(domainN).range(rangeSVGX);
var yLineScale = d3.scale.linear().domain(domainP).range(rangeSVGY);

d3.selection.data(myData).enter().append("circle").attr("cx", function(d){ return xLineScale(d.n); }).attr("cy", function(d){ yLineScale(d.p); }).attr("r", "15");

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of