d3#format TypeScript Examples

The following examples show how to use d3#format. 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: Progress.ts    From anichart.js with MIT License 6 votes vote down vote up 
getComponent(sec: number) {
    const val = scaleLinear(this.aniTime, [0, 100])
      .clamp(true)
      .interpolate(easeInterpolate(easePolyOut.exponent(5)))(sec);

    const label = format("d")(val);
    const res = this.ani.getComponent(sec);
    const textLabel = new Text({
      text: val === 100 ? `` : `Loading ${label} %`,
      font,
      fontSize: 24,
      textAlign: "center",
      textBaseline: "top",
      position: { x: 0, y: this.shape.height },
      fillStyle: "#fff",
    });
    res?.children.push(textLabel);
    return res;
  }
Example #2
Source File: BaseChart.ts    From anichart.js with MIT License 5 votes vote down vote up 
protected getAxisComponent(
    format: (v: number | { valueOf(): number }) => string,
    scale0: ScaleLinear<number, number, never>,
    scale1: ScaleLinear<number, number, never>,
    pos: number,
    count: number,
    text: TextOptions,
    type: "x" | "y",
    sec: number,
    secRange: [number, number],
    scale: ScaleLinear<number, number, never>
  ) {
    const alpha = (sec - secRange[0]) / (secRange[1] - secRange[0]);
    const ticks0 = scale0.ticks(count);
    const ticks1 = scale1.ticks(count);
    const ticks: { v: number; a: number; init: number }[] = [
      ...ticks0.map((t) => {
        if (ticks1.find((d) => d === t)) {
          return { v: t, a: 1, init: 0 };
        } else {
          return { v: t, a: 1 - alpha, init: 0 };
        }
      }),
    ];

    ticks1.forEach((tickVal) => {
      const tick = ticks.find((d) => d.v === tickVal);
      if (tick) {
        tick.a = 1;
      } else {
        ticks.push({ v: tickVal, a: alpha, init: 1 });
      }
    });
    const res = new Component({
      position: {
        x: this.margin.left + this.yAxisWidth + this.yAxisPadding,
        y: this.margin.top + this.xAxisHeight + this.xAxisPadding,
      },
    });
    res.children = ticks.map((tick) => {
      const t = new Text(text);
      if (type === "y") {
        t.position = { y: scale(tick.v), x: -this.yAxisPadding };
        t.textAlign = "right";
        t.textBaseline = "middle";
      } else {
        t.position = { x: scale(tick.v), y: -this.xAxisPadding };
        t.textBaseline = "bottom";
        t.textAlign = "center";
      }
      // t.children.push(
      //   new Rect({
      //     shape: { width: 10, height: 1 },
      //     fillStyle: "#Fff",
      //   })
      // );
      t.text = format(tick.v);
      t.alpha = tick.a;
      return t;
    });
    return res;
  }
Example #3
Source File: BaseChart.ts    From anichart.js with MIT License 5 votes vote down vote up 
xTickFormat = format(",d");
Example #4
Source File: BaseChart.ts    From anichart.js with MIT License 5 votes vote down vote up 
yTickFormat = format(",d");
Example #5
Source File: BaseChart.ts    From anichart.js with MIT License 5 votes vote down vote up 
valueFormat = (cData: any) => {
    return format(",.0f")(cData[this.valueField]);
  };