TypeScript d3.scaleOrdinal函數代碼示例

export function colorCategory(parameters: { [name: string]: string }, domain: string[]): d3.ScaleOrdinal<string, string> {

  const cacheKey = "_cachedColorOrdinal_"; 

  var category = parameters["ColorCategory"];
  var categorySteps = parseInt(parameters["ColorCategorySteps"]);
  if (parameters[cacheKey]) {
    const cached = parameters[cacheKey] as any as CachedColorOrdinal;

    if (cached.category == category && cached.categorySteps == categorySteps) {
      domain.forEach(a => cached.scale(a));
      return cached.scale;
    }
  }

  var scheme = getColorScheme(category, categorySteps);

  const newCached: CachedColorOrdinal = {
    category: category,
    categorySteps: categorySteps,
    scale: d3.scaleOrdinal(scheme).domain(domain),
  };

  parameters[cacheKey] = newCached as any;

  return newCached.scale;
}

export function* axes(xtitle, ytitle, changeLimits) {

  let margin = { top: 20, right: 25, bottom: 30, left: 50 },
    width = 480 - margin.left - margin.right,
    height = 180 - margin.top - margin.bottom;

  let svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  let colors = d3.scaleOrdinal(d3.schemeCategory10);
  let x = d3.scaleLinear().range([0, width]);
  let y = d3.scaleLinear().range([height, 0]);
  let x_axis = d3.axisBottom(x);
  let y_axis = d3.axisLeft(y);
  let x_node = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
  let y_node = svg.append("g")
    .attr("class", "y axis");

  x_node.append("text")
    .attr("transform", "translate(" + width + ", 0)")
    .text(xtitle);
  y_node.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(ytitle);

  let l = d3.line()
    .x(function (d, n) { return x(n) })
    .y(function (d) { return y(d) });
  let p = svg.append("path")
    .attr("class", "line")
    .attr("stroke", colors("1"));

  let first = true;
  while (true) {
    let data = yield svg;
    let ymin = Math.min(...data);
    let ymax = Math.max(...data);
    if (changeLimits || first) {
      first = false;
      x.domain([0, data.length]);
      y.domain([ymin, ymax]);
    }
    // update axes
    x_node.call(x_axis);
    y_node.call(y_axis);

    p.datum(data)
      .attr("d", l);
  }
}

 * stand-alone pages for plotting.  Note currently there is only one global
 * handler. It gets replaced it register is called twice.
 */
export function register(handler: OutputHandler): void {
  if (h == null) {
    console.warn("Warning replacing existing OutputHandler.");
  }
  h = handler;
}

export function outputEl(): null | Element {
  return h ? h() : null;
}

// TODO colors should match those used by the syntax highlighting.
const color = d3.scaleOrdinal(d3.schemeCategory10);

function makeAxis(svg, margin, xScale, yScale, width, height) {
  const axisBottom = d3.axisBottom(xScale);
  axisBottom.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${height + margin.top})`)
    .call(axisBottom);

  const axisLeft = d3.axisLeft(yScale);
  axisLeft.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`)
    .call(axisLeft);

  const axisRight = d3.axisRight(yScale);

export function category8() {
    return scaleOrdinal().range(paletteCategory8);
}