TypeScript d3.nest函数代码示例

    public update(data: [any]) {
        let propertyKey = this.config.get('propertyKey');
        let dataSeries = nest().key((d: any) => d[propertyKey]).entries(data);
        let series = this.svg.selectAll(`.${Globals.SELECTOR_ELEMENT}`);
        let colorScale = this.config.get('colorScale');
        let height = this.config.get('height');
        let areaOpacity = this.config.get('areaOpacity');

        let areas = series.data(dataSeries, (d: any) => d[propertyKey]);

        this.elementEnter = areas.enter()
            .append('g')
            .attr('class', Globals.SELECTOR_ELEMENT)
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d[propertyKey])
            .attr('clip-path', 'url(#' + this.config.get('proteicID') + '_brush)')
            .append('svg:path')
            .attr('data-proteic-element', 'area')
            .attr('class', 'areas')
            .style('fill', (d: any) => colorScale(d[propertyKey]))
            .style('fill-opacity', areaOpacity)
            .attr('d', (d: any) => this.areaGenerator(d.values));

        this.elementExit = areas.exit().remove();

        this.elementUpdate = this.svg.selectAll('.areas')
            .data(dataSeries, (d: any) => d.key);
    }

    public update(data: any[]): void {
        let propertyKey = this.config.get('propertyKey');
        let dataSeries = nest().key((d: any) => d[propertyKey]).entries(data);
        let series = this.linesContainer.selectAll('g.lineSeries');
        let colorScale = this.config.get('colorScale');

        let lines = series.data(dataSeries, (d: any) => d.key);

        this.elementEnter = lines.enter()
            .append('g')
            .attr('class', 'lineSeries')
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d.key)
            .attr('clip-path', 'url(#' + this.config.get('proteicID') + '_brush)')            
            .attr('stroke', (d: any) => colorScale(d.key))
            .append('svg:path')
            .style('stroke', (d: any) => colorScale(d.key))
            .style('stroke-width', 1.9)
            .style('fill', 'none')
            .attr('d', (d: any) => this.lineGenerator(d.values))
            .attr('class', 'line');

        this.elementExit = lines.exit().remove();

        this.elementUpdate = this.svg.selectAll('.line')
            .data(dataSeries, (d: any) => d.key);
    }

export function simple2stacked(
    data: Array<any>,
    xProperty: string,
    yProperty: string,
    keyProperty: string
): any {
    return nest().key((d: any) => d[xProperty]).rollup((values: any): any => {
        let r: any = {};
        for (let i = 0; i < values.length; i++) {
            let object = values[i];
            if (object) {
                r[object[keyProperty]] = object[yProperty];
            }
        }
        return r;
    }).entries(data);
}

type LocationState = Pick<AdminUIState, "cachedData", "locations">;

export function selectLocationsRequestStatus(state: LocationState) {
  return state.cachedData.locations;
}

export function selectLocations(state: LocationState) {
  if (!state.cachedData.locations.data) {
    return [];
  }

  return state.cachedData.locations.data.locations;
}

const nestLocations = d3.nest()
  .key((loc: ILocation) => loc.locality_key)
  .key((loc: ILocation) => loc.locality_value)
  .rollup((locations) => locations[0]) // cannot collide since ^^ is primary key
  .map;

export interface LocationTree {
  [key: string]: {
    [value: string]: ILocation,
  };
}

export const selectLocationTree = createSelector(
  selectLocations,
  (ls: ILocation[]) => nestLocations(ls), // TSLint won't let this be point-free
);

    public update(data: any) {
        let propertyKey: string = this.config.get('propertyKey');
        let dataSeries = nest()
            .key((d: any) => d[propertyKey]).entries(data),
            legend = null,
            entries = null,
            colorScale = this.config.get('colorScale'),
            height = this.config.get('height'),
            width = this.config.get('width'),
            legendPosition = this.config.get('legendPosition') || 'right';

        if (dataSeries.length === 1 && dataSeries[0].key === 'undefined') {
            console.warn('Not showing legend, since there is a valid key');
            return;
        }

        legend = this.svg.select('.legend');

        entries = legend.selectAll(`.legend-entry`)
            .data(dataSeries, (d: any) => d.key);

        entries.exit().remove();

        let enterEntries = entries.enter().append('g')
            .attr('class', 'legend-entry')
            .attr(Globals.LEGEND_DATA_KEY_ATTRIBUTE, (d: any) => d.key);

        enterEntries.append('rect')
            .attr('class', 'legend-cb')
            .attr('height', 20)
            .attr('width', 20)
            .style('fill', (d: any) => colorScale(d.key))
            .style('stroke', (d: any) => colorScale(d.key))
            .style('opacity', 0.8)
            .style('cursor', 'pointer')
            .on('click.default', (d: any) => this.toggle(d));

        enterEntries.append('text')
            .attr('class', 'legend-txt')
            .attr('dy', '0.55em')
            .text((d: any) => d.key)
            .on('click.default', () => this.toggle);

        enterEntries.merge(entries);

        switch (legendPosition) {
            case 'top':
                this.drawTopLegendCb(legend);
                this.drawTopLegendTxt(legend);
                break;
            case 'right':
                this.drawRightLegendCb(legend, width);
                this.drawRightLegendTxt(legend, width);
                break;
            case 'bottom':
                this.drawBottomLegendCb(legend, height);
                this.drawBottomLegendTxt(legend, height);
                break;
        }

        entries.exit().remove();
    }

export function simple2nested(data: any, key = 'key'): any {
    return nest().key((d: any) => d[key]).entries(data);
}

	ngOnInit() {
		const data = [
			{key: "Group1" , value: 37, date: new Date(2012, 4, 23)},
			{key: "Group2" , value: 12, date: new Date(2012, 4, 23)},
            {key: "Group3" , value: 46, date: new Date(2012, 4, 23)},
            
            {key: "Group1" , value: 32, date: new Date(2012, 4, 24)},
			{key: "Group2" , value: 19, date: new Date(2012, 4, 24)},
            {key: "Group3" , value: 42, date: new Date(2012, 4, 24)},
            
            {key: "Group1" , value: 45, date: new Date(2012, 4, 25)},
			{key: "Group2" , value: 16, date: new Date(2012, 4, 25)},
            {key: "Group3" , value: 44, date: new Date(2012, 4, 25)},

            {key: "Group1" , value: 24, date: new Date(2012, 4, 26)},
			{key: "Group2" , value: 52, date: new Date(2012, 4, 26)},
            {key: "Group3" , value: 64, date: new Date(2012, 4, 26)},
		];

        const svgElem = d3.select(".svg");

		const margin = {top: 20, right: 30, bottom: 30, left: 40},
            width = +svgElem.attr("width") - margin.left - margin.right,
            height = +svgElem.attr("height") - margin.top - margin.bottom;

        const x = d3.time.scale()
            .range([0, width]);

        const y = d3.scale.linear()
            .range([height, 0]);

        const z = d3.scale.category10();

        const xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(d3.time.days);

        const yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

        const stack = d3.layout.stack<{key: string , value: number, date: Date, values: any}>()
            .offset("zero")
            .values(d => d.values as any)
            .x(d => d.date as any)
            .y(d => d.value as any);

        const nest = d3.nest<{key: string , value: number, date: Date}>()
            .key(d => 
                d.key);

        const area = d3.svg.area<{key: string , value: number, date: Date, y: number, y0: number}>()
            .interpolate("cardinal")
            .x(d => x(d.date))
            .y0(d => y(d.y0))
            .y1(d => y(d.y0 + d.y));

        const svg = svgElem
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        const layers = stack(nest.entries(data as any) as any);

        x.domain(d3.extent(data, d => d.date as any));
        y.domain([0, d3.max(data, d => (d as any).y0 + (d as any).y)]);

        svg.selectAll(".layer")
            .data(layers)
            .enter().append("path")
            .attr("class", "layer")
            .attr("d", d => area(d.values as any))
            .style("fill", (d, i) => z(i.toString()));

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
	}

    public update(data: [any]) {
        let propertyKey = this.config.get('propertyKey');
        let propertyX = this.config.get('propertyX');
        let propertyY = this.config.get('propertyY');

        let dataSeries = nest()
            .key((d: any) => d[propertyKey])
            .entries(data),
            markers: any = null,
            markerShape = this.config.get('markerShape'),
            markerSize = this.config.get('markerSize'),
            markerOutlineWidth = this.config.get('markerOutlineWidth'),
            colorScale = this.config.get('colorScale');

        let shape = symbol().size(markerSize);

        switch (markerShape) {
            case 'dot':
                shape.type(symbolCircle);
                break;
            case 'ring':
                shape.type(symbolCircle);
                break;
            case 'cross':
                shape.type(symbolCross);
                break;
            case 'diamond':
                shape.type(symbolDiamond);
                break;
            case 'square':
                shape.type(symbolSquare);
                break;
            case 'star':
                shape.type(symbolStar);
                break;
            case 'triangle':
                shape.type(symbolTriangle);
                break;
            case 'wye':
                shape.type(symbolWye);
                break;
            case 'circle':
                shape.type(symbolCircle);
                break;
            default:
                shape.type(symbolCircle);
        }

        // JOIN series
        // NOTE: d.key instead of d[propertyKey] because dataSeries is d3.Nest
        let series = this.svg.selectAll(`.${Globals.SELECTOR_SERIE}`)
            .data(dataSeries, (d: any) => d.key);

        // EXIT series
        series.exit().remove();

        // ENTER new series
        series = series.enter().append('g')
            .attr('class', Globals.SELECTOR_SERIE)
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d.key)
            .attr('clip-path', 'url(#' + this.config.get('proteicID') + '_brush)')
            .merge(series)
            ;

        // JOIN points
        let points = series.selectAll(`.${Globals.SELECTOR_ELEMENT}`)
            .data((d: any) => d.values, (d: any) => d[propertyX]);

        // UPDATE points
        this.elementUpdate = points.attr('class', Globals.SELECTOR_ELEMENT);


        // ENTER points
        this.elementEnter = points.enter().append('path')
            .attr('data-proteic-element', 'point')
            .attr('class', Globals.SELECTOR_ELEMENT)
            .attr('d', shape)
            .style('stroke', (d: any) => colorScale(d[propertyKey]))
            .style('fill', (d: any) => markerShape !== 'ring'
                ? colorScale(d[propertyKey])
                : 'transparent'
            )
            .attr('transform', (d: any) =>
                `translate(${this.x.xAxis.scale()(d[propertyX])}, ${this.y.yAxis.scale()(d[propertyY])})`);

        // EXIT points
        this.elementExit = points.exit().remove();

        points
            .on('mousedown.user', this.config.get('onDown'))
            .on('mouseup.user', this.config.get('onUp'))
            .on('mouseleave.user', this.config.get('onLeave'))
            .on('mouseover.user', this.config.get('onHover'))
            .on('click.user', this.config.get('onClick'));
    }