• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript d3.map函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中d3.map函数的典型用法代码示例。如果您正苦于以下问题:TypeScript map函数的具体用法?TypeScript map怎么用?TypeScript map使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了map函数的6个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: partitionChildren

  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;
  }
开发者ID:gmadrid,项目名称:cfjj-viz,代码行数:26,代码来源:d3chart.ts


示例2: updateStacked

    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());
    }
开发者ID:proteus-h2020,项目名称:proteus-charts,代码行数:34,代码来源:Barset.ts


示例3: discontinuousTimeScaleProvider

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,
  }
}
开发者ID:Svjard,项目名称:ng2-stockcharts,代码行数:49,代码来源:discontinuousTimeScaleProvider.ts


示例4: update

    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);
    }
开发者ID:proteus-h2020,项目名称:proteus-charts,代码行数:48,代码来源:Streamset.ts


示例5: updateGrouped

    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);

    }
开发者ID:proteus-h2020,项目名称:proteus-charts,代码行数:79,代码来源:Barset.ts


示例6: update

    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)
//.........这里部分代码省略.........
开发者ID:proteus-h2020,项目名称:proteus-charts,代码行数:101,代码来源:Timeboxset.ts



注:本文中的d3.map函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript d3.max函数代码示例发布时间:2022-05-25
下一篇:
TypeScript d3.line函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap