TypeScript d3.map函數代碼示例

  function partitionChildren(parent, children, lastIdValue, keys, currKeyIndex) {
    if (currKeyIndex >= keys.length) { 
      children.forEach(c => { c.parent = parent; });
      return children; 
    }

    let keyMap = d3.map();
    children.forEach(c => {
      let currKeyValue = currentKeyValue(c, keys, currKeyIndex);
      let currKeyArray = arrayForKey(keyMap, currKeyValue);
      currKeyArray.push(c);
    });

    let newNodes = [];
    keyMap.each((v,k) => {
      let newIdValue = lastIdValue + k;
      let newInnerNode = { 
        id: newIdValue,
        keyValue: k,
        parent: parent, 
        children: null };
      newInnerNode.children = partitionChildren(newInnerNode, v, newIdValue, keys, currKeyIndex + 1);
      newNodes.push(newInnerNode);
    });
    return newNodes;
  }

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

        let keys: any = map(data, (d) => d[propertyKey]).keys();
        let stack = this.config.get('stack');
        data = stack.keys(keys)(simple2stacked(data, propertyX, propertyY, propertyKey));

        let colorScale = this.config.get('colorScale'),
            layer = this.svg.selectAll('.barSeries').data(data),
            layerEnter = layer.enter().append('g'),
            x = this.x.xAxis.scale(),
            y = this.y.yAxis.scale();

        layer.exit().remove();

        layer.merge(layerEnter)
            .attr('class', 'barSeries')
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d[propertyKey])
            .style('fill', (d: any, i: number) => d[propertyKey] !== undefined
                ? colorScale(d[propertyKey])
                : colorScale(i)
            )
            .selectAll('rect')
            .data((d: any) => d)
            .enter()
            .append('rect')
            .attr('data-proteic-element', 'bar')
            .attr('x', (d: any) => x(d.data[propertyKey]))
            .attr('y', (d: any) => y(d[1]))
            .attr('height', (d: any) => y(d[0]) - y(d[1]))
            .attr('width', x.bandwidth());
    }

function discontinuousTimeScaleProvider(data,
    dateAccessor,
    indexAccessor,
    indexMutator) {

  var calculate = discontinuousIndexCalculatorLocalTime.source(dateAccessor);
  var index = calculate(data);
  // var interval1 = Math.round((dateAccessor(last(data)) - dateAccessor(head(data))) / data.length)
  // console.log(interval, interval1);

  var map = d3.map()
  for (var i = 0; i < data.length - 1; i++) {

    var nextDate = dateAccessor(data[i + 1]);
    var nowDate = dateAccessor(data[i]);
    var diff = nextDate - nowDate;

    if (map.has(diff)) {
      var count = parseInt(map.get(diff), 10) + 1;
      map.set(diff, count)
    } else {
      map.set(diff, 1)
    }
  };

  var entries = map.entries().sort((a, b) => a.value < b.value);

  // For Renko/p&f
  var interval = entries[0].value === 1
    ? Math.round((dateAccessor(last(data)) - dateAccessor(head(data))) / data.length)
    : parseInt(entries[0].key, 10)

  // console.log(interval, entries[0].key);

  var xScale = financeDiscontinuousScale(index, interval);

  // console.log(index);
  var mergedData = zipper()
    .combine(indexMutator);

  var finalData = mergedData(data, index);

  return {
    data: finalData,
    xScale,
    xAccessor: d => d && indexAccessor(d).index,
    displayXAccessor: dateAccessor,
  }
}

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

        let colorScale = this.config.get('colorScale'),
            onDown = this.config.get('onDown'),
            onUp = this.config.get('onUp'),
            onLeave = this.config.get('onLeave'),
            onHover = this.config.get('onHover'),
            onClick = this.config.get('onClick'),
            keys = map(data, (d) => d[propertyKey]).keys(),
            data4stack = simple2stacked(data, propertyX, propertyY, propertyKey),
            stack = this.config.get('stack'),
            dataSeries = stack(data4stack);

        this.areaGenerator.x((d: any) => this.xyAxes.x.xAxis.scale()((new Date(d.data[propertyKey]))));

        // JOIN series
        let series = this.svg.selectAll(`.${Globals.SELECTOR_SERIE}`)
            .data(dataSeries);

        // UPDATE series
        series.attr('class', Globals.SELECTOR_SERIE)
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d[propertyKey])
            .attr('d', this.areaGenerator)
            .style('fill', (d: any, i: number) => colorScale(d[propertyKey]));

        // ENTER + UPDATE series
        series = series.enter().append('path')
            .attr('class', Globals.SELECTOR_SERIE)
            .attr('data-proteic-element', 'stream')
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d[propertyKey])
            .attr('d', this.areaGenerator)
            .style('fill', (d: any, i: number) => colorScale(d[propertyKey]))
            .merge(series);

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

        series
            .attr('opacity', 1)
            .on('mousedown.user', onDown)
            .on('mouseup.user', onUp)
            .on('mouseleave.user', onLeave)
            .on('mouseover.user', onHover)
            .on('click.user', onClick);
    }

    private updateGrouped(data: any[]) {
        let propertyKey = this.config.get('propertyKey');
        let propertyX = this.config.get('propertyX');
        let propertyY = this.config.get('propertyY');
        let width = this.config.get('width');

        let keys = map(data, (d) => d[propertyKey]).keys();

        this.keys = keys;

        let colorScale = this.config.get('colorScale'),
            layer: any = null,
            x = this.x.xAxis.scale(),
            y = this.y.yAxis.scale(),
            xGroup = scaleBand().domain(keys).range([0, x.bandwidth()]),

            height = this.config.get('height');

        let nestedData = simple2nested(data, propertyKey);

        // JOIN series
        let serie = this.svg.selectAll(`.${Globals.SELECTOR_SERIE}`)
            .data(nestedData);

        serie.exit().remove();

        // UPDATE series
        serie.attr('class', Globals.SELECTOR_SERIE)
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d[propertyKey]);

        // ENTER + UPDATE series
        serie = serie.enter().append('g')
            .attr('class', Globals.SELECTOR_SERIE)
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d[propertyKey])
            .merge(serie);

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

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

        // UPDATE bars
        this.elementUpdate = bars
            .attr('class', Globals.SELECTOR_ELEMENT)
            .attr('fill', (d: any, i: number) => d[propertyKey] !== undefined
                ? colorScale(d[propertyKey])
                : colorScale(i)
            )
            .attr('transform', (d: any) => 'translate(' + xGroup(d[propertyKey]) + ')')
            .attr('x', (d: any) => x(d[propertyX]));

        // ENTER bars
        this.elementEnter = bars.enter()
            .append('rect')
            .attr('data-proteic-element', 'bar')
            .attr('class', Globals.SELECTOR_ELEMENT)
            .attr('fill', (d: any, i: number) => d[propertyKey] !== undefined
                ? colorScale(d[propertyKey])
                : colorScale(i)
            )
            .attr('transform', (d: any) => 'translate(' + xGroup(d[propertyKey]) + ')')
            .attr('height', 0)  // This makes the transition start
            .attr('y', y(0))  // at the bottom of the chart
            .attr('x', (d: any) => x(d[propertyX]))
            .attr('width', xGroup.bandwidth());

        // EXIT bars
        this.elementExit = bars.exit();

        this.svg.select('.baseline').remove();
        this.svg.append('line')
          .attr('class', 'baseline')
          .attr('y1', y(0))
          .attr('y2', y(0))
          .attr('x2', width);

    }

    public update(data: any[]): void {
        let propertyKey = this.config.get('propertyKey');
        let propertyStart = this.config.get('propertyStart');
        let propertyEnd = this.config.get('propertyEnd');
        let propertyZ = this.config.get('propertyZ');
        
        data = data.filter((d) => propertyEnd in d || propertyStart in d);

        let colorScale = this.config.get('colorScale'),
            colorScaleType = this.config.get('colorScaleType'),
            height = this.config.get('height'),
            onDown = this.config.get('onDown'),
            onUp = this.config.get('onUp'),
            onLeave = this.config.get('onLeave'),
            onHover = this.config.get('onHover'),
            onClick = this.config.get('onClick'),
            displayValues = this.config.get('displayValues'),
            valuesFormat = this.config.get('valuesFormat'),
            keys = map(data, (d) => d[propertyKey]).keys(),
            layer = this.svg.selectAll('.serie').data(data),
            layerEnter = null,
            layerMerge = null,
            box = null,
            boxEnter = null,
            boxExit = null,
            boxMerge = null,
            extLanes = null,
            yLanes: any = null,
            yLanesBand = scaleBand().range([0, keys.length + 1]).domain(keys),
            x = this.xyAxes.x.xAxis.scale(),
            y = this.xyAxes.y.yAxis.scale();

        if (colorScaleType === 'sequential') {
            let min = (d3Min(data, (d: any) => +d[propertyZ])),
                max = (d3Max(data, (d: any) => +d[propertyZ]));
            colorScale.domain([min, max]);
        }

        data = simple2nested(data, propertyKey);
        
        extLanes = extent(data, (d, i) => i);
        yLanes = scaleLinear().domain([extLanes[0], extLanes[1] + 1]).range([0, height]);

        layer = this.svg.selectAll('.serie').data(data);
        
        // NOTE: d.key instead of d[propertyKey] because data is d3.Nest
        layerEnter = layer.enter()
            .append('g')
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d.key);

        layerMerge = layer.merge(layerEnter)
            .attr('class', 'serie');
            
            
        box = layerMerge.selectAll('.box')
            .data((d: any) => d.values);
            
        boxExit = layer.exit().remove();

        boxEnter = box.enter()
            .append('g')
            .attr('class', 'box');

        boxEnter.append('rect')
            .attr('data-proteic-element', 'timeBox')
            .attr('width', (d: any) => x(d[propertyEnd]) - x(d[propertyStart]))
            .attr('x', (d: any) => x(d[propertyStart]))
            .attr('y', (d: any) => y(d[propertyKey]))
            .attr('height', () => 0.8 * yLanes(1))
            .style('fill', (d: any) => colorScaleType === 'sequential'
                ? colorScale(d[propertyZ])
                : colorScale(d[propertyKey])
            );

        if (displayValues) {
            boxEnter.append('text')
                .attr('x', (d: any) => x(d[propertyStart]) + (x(d[propertyEnd]) - x(d[propertyStart])) / 2)
                .attr('y', (d: any) => y(d[propertyKey]) + 0.8 * yLanes(1) / 2)
                .attr('dy', '3')
                .attr('text-anchor', 'middle')
                .attr('dominant-baseline', 'middle')
                .text((d: any) => format(valuesFormat)(d[propertyZ]));
        }

        boxMerge = box.merge(boxEnter);

        boxMerge.select('rect')
            .attr('width', (d: any) => x(d[propertyEnd]) - x(d[propertyStart]))
            .attr('x', (d: any) => x(d[propertyStart]))
            .attr('y', (d: any) => y(d[propertyKey]))
            .attr('height', () => 0.8 * yLanes(1))
            .style('fill', (d: any) => colorScaleType === 'sequential'
                ? colorScale(d[propertyZ])
                : colorScale(d[propertyKey])
            );

        if (displayValues) {
            boxMerge.select('text')
                .attr('x', (d: any) => x(d[propertyStart]) + (x(d[propertyEnd]) - x(d[propertyStart])) / 2)
                .attr('y', (d: any) => y(d[propertyKey]) + 0.8 * yLanes(1) / 2)
//.........這裏部分代碼省略.........