TypeScript d3-scale.scaleOrdinal函數代碼示例

  generateColorScheme(scheme, type, domain) {
    if (typeof(scheme) === 'string') {
      scheme = colorSets.find(cs => {
        return cs.name === scheme;
      });
    }
    let colorScale;
    if (type === 'quantile') {
      colorScale = scaleQuantile()
        .range(scheme.domain)
        .domain(domain);

    } else if (type === 'ordinal') {
      colorScale = scaleOrdinal()
        .range(scheme.domain)
        .domain(domain);

    } else if (type === 'linear') {
      // linear schemes must have at least 2 colors
      const colorDomain = [...scheme.domain];
      if (colorDomain.length === 1) {
        colorDomain.push(colorDomain[0]);
        this.colorDomain = colorDomain;
      }

      const points = range(0, 1, 1.0 / colorDomain.length);
      colorScale = scaleLinear()
        .domain(points)
        .range(colorDomain);
    }

    return colorScale;
  }

const diffColor = (() => {
  const colors = [
    '#ffbb78',
    '#f7b6d2',
    '#dbdb8d',
    '#6b6ecf',
    '#8ca252',
    '#b5cf6b',
    '#cedb9c',
    '#bd9e39',
    '#d6616b',
    '#ce6dbd',
    '#de9ed6',
  ]
  return d3Scale.scaleOrdinal<number, string>(colors)
})()

// Preparatory Steps
// --------------------------------------------------------------------------

let num: number;

let axisScaleNumber: d3Axis.AxisScale<number>;
let axisScaleDate: d3Axis.AxisScale<Date>;
let axisScaleString: d3Axis.AxisScale<string>;

// --------------------------------------------------------------------------
// Test AxisScale Helper Interface
// --------------------------------------------------------------------------

axisScaleNumber = scaleLinear();
axisScaleDate = scaleTime();
axisScaleString = scaleOrdinal<number>();
axisScaleNumber = scaleBand<number>();
axisScaleNumber = scalePoint<number>();
axisScaleString = scaleBand();
axisScaleString = scalePoint();
// --------------------------------------------------------------------------
// Test AxisContainerElement
// --------------------------------------------------------------------------

let containerElement: d3Axis.AxisContainerElement;
const svg: SVGSVGElement = select<SVGSVGElement, any>('svg').node() !; // mock
const g: SVGGElement = select<SVGGElement, any>('g').node() !; // mock
const canvas: HTMLCanvasElement = select<HTMLCanvasElement, any>('canvas').node() !; // mock

containerElement = svg;
containerElement = g;

outputString = thresholdScaleNumberString(0.9);

// copy(...) -----------------------------------------------------------------

const copiedThresholdScale: d3Scale.ScaleThreshold<number, string> = thresholdScaleNumberString.copy();

// -------------------------------------------------------------------------------
// Ordinal Scale Factory
// -------------------------------------------------------------------------------

// scaleOrdinal() -----------------------------------------------------------------

let ordinalScaleStringString: d3Scale.ScaleOrdinal<string, string>;
let ordinalScaleStringNumber: d3Scale.ScaleOrdinal<string, number>;

ordinalScaleStringString = d3Scale.scaleOrdinal<string>();
ordinalScaleStringNumber = d3Scale.scaleOrdinal<string, number>();

// ScaleOrdinal Interface ========================================================

// domain(...) -----------------------------------------------------------------

ordinalScaleStringString = ordinalScaleStringString.domain(['negative', 'neutral', 'positive']);
domainStrings = ordinalScaleStringString.domain();

ordinalScaleStringNumber = ordinalScaleStringNumber.domain(['negative', 'neutral', 'positive']);

// range(...) -----------------------------------------------------------------

ordinalScaleStringString = ordinalScaleStringString.range(['crimson', 'midnightblue', 'seagreen']);
rangeStrings = ordinalScaleStringString.range();

outputString = thresholdScaleNumberString(0.9);

// copy(...) -----------------------------------------------------------------

const copiedThresholdScale: d3Scale.ScaleThreshold<number, string> = thresholdScaleNumberString.copy();

// -------------------------------------------------------------------------------
// Ordinal Scale Factory
// -------------------------------------------------------------------------------

// scaleOrdinal() -----------------------------------------------------------------

let ordinalScaleStringString: d3Scale.ScaleOrdinal<string, string>;
let ordinalScaleStringNumber: d3Scale.ScaleOrdinal<string, number>;

ordinalScaleStringString = d3Scale.scaleOrdinal<string>();
ordinalScaleStringString = d3Scale.scaleOrdinal<string>(schemePuRd[3]);
ordinalScaleStringNumber = d3Scale.scaleOrdinal<string, number>();
ordinalScaleStringString = d3Scale.scaleOrdinal<string, string>(schemePuRd[3]);

// ScaleOrdinal Interface ========================================================

// domain(...) -----------------------------------------------------------------

ordinalScaleStringString = ordinalScaleStringString.domain(['negative', 'neutral', 'positive']);
domainStrings = ordinalScaleStringString.domain();

ordinalScaleStringNumber = ordinalScaleStringNumber.domain(['negative', 'neutral', 'positive']);

// range(...) -----------------------------------------------------------------

    // Get the data for each stacked area series, cleaned to ensure every series
    // "lines up" i.e. has a data point for every year
    @computed get groupedData(): StackedAreaSeries[] {
        const { chart } = this
        const { filledDimensions, selectedKeys, selectedKeysByKey } = chart.data

        let groupedData: StackedAreaSeries[] = []

        // First, we populate the data as we would for a line chart (each series independently)
        filledDimensions.forEach((dimension, dimIndex) => {
            const seriesByKey = new Map<DataKey, StackedAreaSeries>()

            for (let i = 0; i < dimension.years.length; i++) {
                const year = dimension.years[i]
                const value = +dimension.values[i]
                const entity = dimension.entities[i]
                const datakey = chart.data.keyFor(entity, dimIndex)
                let series = seriesByKey.get(datakey)

                // Not a selected key, don't add any data for it
                if (!selectedKeysByKey[datakey]) continue
                // Must be numeric
                if (isNaN(value)) continue
                // Stacked area chart can't go negative!
                if (value < 0) continue

                if (!series) {
                    series = {
                        values: [],
                        key: datakey,
                        isProjection: dimension.isProjection,
                        color: "#fff" // tmp
                    }
                    seriesByKey.set(datakey, series)
                }

                series.values.push({ x: year, y: value, time: year })
            }

            groupedData = groupedData.concat([...Array.from(seriesByKey.values())])
        })

        // Now ensure that every series has a value entry for every year in the data
        let allYears: number[] = []
        groupedData.forEach(series => allYears.push(...series.values.map(d => d.x)))
        allYears = sortedUniq(sortBy(allYears))

        groupedData.forEach(series => {
            let i = 0
            let isBeforeStart = true

            while (i < allYears.length) {
                const value = series.values[i] as StackedAreaValue|undefined
                const expectedYear = allYears[i]

                if (value === undefined || value.x > allYears[i]) {
                    let fakeY = NaN

                    if (!isBeforeStart && i < series.values.length) {
                        // Missing data in the middle-- interpolate a value
                        const prevValue = series.values[i - 1]
                        const nextValue = series.values[i]
                        fakeY = (nextValue.y + prevValue.y) / 2
                    }

                    series.values.splice(i, 0, { x: expectedYear, y: fakeY, time: expectedYear, isFake: true })
                } else {
                    isBeforeStart = false
                }
                i += 1
            }
        })

        // Strip years at start and end where we couldn't successfully interpolate
        for (const firstSeries of groupedData.slice(0, 1)) {
            for (let i = firstSeries.values.length-1; i >= 0; i--) {
                if (groupedData.some(series => isNaN(series.values[i].y))) {
                    for (const series of groupedData) {
                        series.values.splice(i, 1)
                    }
                }
            }
        }

        // Preserve order
        groupedData = sortBy(groupedData, series => -selectedKeys.indexOf(series.key))

        // Assign colors
        const baseColors = this.colorScheme.getColors(groupedData.length)
        if (chart.props.invertColorScheme)
            baseColors.reverse()
        const colorScale = scaleOrdinal(baseColors)
        groupedData.forEach(series => {
            series.color = chart.data.keyColors[series.key] || colorScale(series.key)
        })

        // In relative mode, transform data to be a percentage of the total for that year
        if (this.isRelative) {
            if (groupedData.length === 0)
                return []
//.........這裏部分代碼省略.........

function palette_ordinal(id?, colors?): any {
    if (!id) return ["default"].concat(d3Ordinal.concat(brewerOrdinal).concat(hpccOrdinal).concat(flatuiOrdinal));
    let scale = null;

    if (colors) {
        scale = d3ScaleOrdinal().range(colors);
    } else {
        if (d3Ordinal.indexOf(id) >= 0) {
            scale = d3ScaleOrdinal(d3Schemes[id]);
        } else if (flatuiOrdinal.indexOf(id) >= 0) {
            scale = d3ScaleOrdinal().range(flatuiSchemes[id]);
        } else if (hpccOrdinal.indexOf(id) >= 0) {
            let newColors = [];
            switch (id) {
                case "hpcc10":
                    const defColors = palette_ordinal("default").colors();
                    newColors = defColors.filter(function (_item, idx) {
                        if (idx % 2) {
                            return true;
                        }
                        return false;
                    });
                    break;
                case "hpcc20":
                    newColors = palette_ordinal("category10").colors().concat(palette_ordinal("hpcc10").colors());
                    break;
            }
            scale = d3ScaleOrdinal().range(newColors);
        } else if (brewerOrdinal.indexOf(id) > 0) {
            let largestPalette = 12;
            while (largestPalette > 0) {
                if (m_colorbrewer[id][largestPalette]) {
                    scale = d3ScaleOrdinal().range(m_colorbrewer[id][largestPalette]);
                    break;
                }
                --largestPalette;
            }
        }
        if (!scale) {
            //  Default to Category20  ---
            scale = d3ScaleOrdinal(d3SchemeCategory20);
        }
        colors = scale.range();
    }
    const ordinal: any = function (_) {
        return scale(_);
    };
    ordinal.type = function () {
        return "ordinal";
    };
    ordinal.id = function (_) {
        if (!arguments.length) return id;
        id = _;
        return ordinal;
    };
    ordinal.colors = function (_) {
        if (!arguments.length) return colors;
        colors = _;
        return ordinal;
    };
    ordinal.clone = function (newID) {
        ordinalCache[newID] = palette_ordinal(newID, this.colors());
        return ordinalCache[newID];

    };
    ordinal.cloneNotExists = function (newID) {
        if (ordinalCache[newID]) {
            return ordinalCache[newID];
        }
        return this.clone(newID);
    };
    ordinal.switch = function (_id, _colors) {
        if (id === _id) {
            return this;
        }
        return arguments.length ? fetchOrdinalItem(_id, _colors) : fetchOrdinalItem();
    };

    return ordinal;
}