d3#group TypeScript Examples

The following examples show how to use d3#group. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: BaseChart.ts    From anichart.js with MIT License 6 votes vote down vote up 
private setDataScales() {
    // 整体日期范围
    const dateExtent = extent(this.data, (d) => d[this.dateField]);
    // 播放进度到日期的映射
    this.secToDate = scaleLinear(this.aniTime, dateExtent).clamp(true);
    const g = group(this.data, (d) => d[this.idField]);
    const dataScales = new Map();
    g.forEach((dataList, k) => {
      dataList.sort(
        (a, b) => a[this.dateField].getTime() - b[this.dateField].getTime()
      );
      // 插入 NaN
      this.insertNaN(dataList, dateExtent);
      // 可优化: 删掉连续的重复值
      // FIXME: 此处有BUG。目前的实现，会干掉连续两个重复值的后一个。
      // 然而只有出现连续的三个重复值，才能忽略了中间的一个重复值。
      // if (true) {
      //   let temp: any[] = [];
      //   temp.push(dataList[0]);
      //   for (let i = 1; i < dataList.length; i++) {
      //     if (
      //       dataList[i][this.valueField] != dataList[i - 1][this.valueField]
      //     ) {
      //       temp.push(dataList[i]);
      //     }
      //   }
      //   temp.push(dataList[dataList.length - 1]);
      //   dataList = temp;
      // }
      const dateList = dataList.map((d) => d[this.dateField]);
      const secList = dateList.map((d) => this.secToDate.invert(d));
      // 线性插值
      const dataScale = scaleLinear(secList, dataList).clamp(true);
      dataScales.set(k, dataScale);
    });
    this.dataScales = dataScales;
  }
Example #2
Source File: BaseChart.ts    From anichart.js with MIT License 5 votes vote down vote up 
setData() {
    this.data = cloneDeep(recourse.data.get(this.dataName));
    let dateSet = new Set();
    let dateIndex = 0;
    this.indexToDate = new Map<number, string>();
    this.data.forEach((d: any) => {
      if (!dateSet.has(d[this.dateField])) {
        dateSet.add(d[this.dateField]);
        dateIndex += 1;
        this.indexToDate.set(dateIndex, d[this.dateField]);
      }
      Object.keys(d).forEach((k) => {
        switch (k) {
          case this.dateField:
            // 日期字符串转成日期
            let date = moment(d[this.dateField]).toDate();
            if (isValidDate(date)) {
              d[k] = date;
              this.nonstandardDate = false;
            } else {
              this.nonstandardDate = true;
              d[k] = new Date(dateIndex);
            }
            break;
          case this.idField:
            // ID保持不变
            break;
          default:
            // 数值转成数字
            if (
              typeof d[k] === "string" &&
              (this.valueKeys.includes(k) || this.valueField === k)
            ) {
              d[k] = +d[k].replace(/,/g, "");
            }
        }
      });
    });
    this.dataGroupByID = group(this.data, (d) => d[this.idField]);
    const dataGroupByDate = group(this.data, (d) =>
      (d[this.dateField] as Date).getTime()
    );
    const result = new Map<Date, any>();
    dataGroupByDate.forEach((v: any[], k: number) => {
      result.set(new Date(k), v);
    });
    this.dataGroupByDate = result;
  }