How to use the d3-scale-chromatic.schemeCategory10 function in d3-scale-chromatic

gold_purple_diverging, red_green_gold_diverging, sunrise_sunset_diverging,
  orange_blue_white_diverging, red_green_white_diverging,
  green_blue_white_diverging, red_blue_white_diverging,
  red_black_white_diverging
} from './symbolSchemes';
import * as _ from 'd3-scale-chromatic';
import {interpolateRgbBasis} from 'd3-interpolate';
import {peek} from 'vega-util';

var discretized = {
  blueorange:  blueOrange
};

var schemes = {
  // d3 categorical palettes
  category10:  _.schemeCategory10,
  accent:      _.schemeAccent,
  dark2:       _.schemeDark2,
  paired:      _.schemePaired,
  pastel1:     _.schemePastel1,
  pastel2:     _.schemePastel2,
  set1:        _.schemeSet1,
  set2:        _.schemeSet2,
  set3:        _.schemeSet3,

  // additional categorical palettes
  category20:  category20,
  category20b: category20b,
  category20c: category20c,
  tableau10:   tableau10,
  tableau20:   tableau20,

export interface ChartPropShared {
  layout?: VizLayout;
  svgClickHandler?: () => void;
  colorSpec?: {
    selected?: string,
    default?: string,
    // the following is to support multiple series
    defaultMultiple?: string[];
  };
}

export const DefaultColorSpec = {
  selected: "orange",
  default: "steelblue",
  // max out at 10, in whcih case we complain
  defaultMultiple: d3ScaleChromatic.schemeCategory10
};

interface ChartSpecBase {
  chartType: ChartType;
  dimension: number;
  relationName: string;
}

export type ChartSpecWithQuery = ChartSpec2DWithQuery;


export interface ChartSpecBase2D extends ChartSpecBase {
  xAttribute: string;
  yAttribute: string;
}

import * as d3ScaleChromatic from "d3-scale-chromatic";
import { personDisplay } from "../Store/Person";
import { QuiltsSettings } from "../Store/Quilts";
import {
   QuiltsResult,
   Layer,
   LINE_SPACING,
   MARGIN,
   F_HEIGHT,
   QuiltsPersonLayout,
   Family
} from "../Server/Quilts";
import ScalableSVG from "../SVG.Scalable";
import "./Quilts.css";

const allColors = d3ScaleChromatic.schemeCategory10.map((c: string) =>
   d3Color.rgb(c)
);

interface QuiltsProps {
   settings: QuiltsSettings;
   layout: QuiltsResult | undefined;
   decujus: number;
}

interface SelectionInfo {
   base: QuiltsPersonLayout;
   color: d3Color.RGBColor;
}

interface QuiltsState {
   selected: SelectionInfo[];

private initChart(): void {
        this.svg = d3.select('svg');

        this.width = this.svg.attr('width') - this.margin.left - this.margin.right;
        this.height = this.svg.attr('height') - this.margin.top - this.margin.bottom;

        this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        this.x = d3Scale.scaleTime().range([0, this.width]);
        this.y = d3Scale.scaleLinear().range([this.height, 0]);
        this.z = d3Scale.scaleOrdinal(d3ScaleChromatic.schemeCategory10);

        this.line = d3Shape.line()
            .curve(d3Shape.curveBasis)
            .x( (d: any) => this.x(d.date) )
            .y( (d: any) => this.y(d.temperature) );

        this.x.domain(d3Array.extent(this.data, (d: Date) => d ));

        this.y.domain([
            d3Array.min(TEMPERATURES, function(c) { return d3Array.min(c.values, function(d) { return d.temperature; }); }),
            d3Array.max(TEMPERATURES, function(c) { return d3Array.max(c.values, function(d) { return d.temperature; }); })
        ]);

        this.z.domain(TEMPERATURES.map(function(c) { return c.id; }));
    }

function color(gen: number) {
   return d3ScaleChromatic.schemeCategory10[gen % 20];
}

loadData(root) {
    const partition = d3partition();
    const color = scale.scaleOrdinal(d3ScaleChromatic.schemeCategory10);
    this.div = selection.select('body').append('div')
      .attr('class', 'tooltip')
      .style('opacity', 0);

    root = d3hierarchy(root);
    root.sum(function (d) {
      return d.size;
    });
    this.paiElement
      .selectAll('path')
      .data(partition(root).descendants())
      .enter()
      .append('path')
      .attr('d', this.arcGenerator)
      .style('fill', (d: any) => {
        const colorNode = this.selectedFilters.filter((node, index) => (d.depth) === index);

private initChart(): void {
        this.svg = d3.select('div.multi').select('svg');

        this.width = this.svg.attr('width') - this.margin.left - this.margin.right;
        this.height = this.svg.attr('height') - this.margin.top - this.margin.bottom;

        this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        this.x = d3Scale.scaleTime().range([0, this.width]);
        this.y = d3Scale.scaleLinear().range([this.height, 0]);
        this.z = d3Scale.scaleOrdinal(d3ScaleChromatic.schemeCategory10);

        this.line = d3Shape.line()
            .curve(d3Shape.curveBasis)
            .x( (d: any) => this.x(d.date) )
            .y( (d: any) => this.y(d.temperature) );

        this.x.domain(d3Array.extent(this.data, (d: Date) => d ));

        this.y.domain([
            d3Array.min(TEMPERATURES, function(c) { return d3Array.min(c.values, function(d) { return d.temperature; }); }),
            d3Array.max(TEMPERATURES, function(c) { return d3Array.max(c.values, function(d) { return d.temperature; }); })
        ]);

        this.z.domain(TEMPERATURES.map(function(c) { return c.id; }));
    }

function nextColor(){
    _nextColor ++;
    return d3ScaleChromatic.schemeCategory10[_nextColor % 10];
}

function color(gen: number) {
   return d3ScaleChromatic.schemeCategory10[gen % 10];
}