d3#color TypeScript Examples

The following examples show how to use d3#color. 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: MapChart.ts    From anichart.js with MIT License 6 votes vote down vote up 
private initComps() {
    this.wrapper = new Component();
    this.pathComponentMap = new Map<string, Path>();

    this.pathMap.forEach((p, mapId) => {
      const path = new Path({
        path: p,
        fillStyle: this.defaultFill,
        strokeStyle: this.strokeStyle,
      });
      this.wrapper.children.push(path);
      this.pathComponentMap.set(mapId, path);
    });
    if (this.showLabel) {
      for (const labelComp of this.labelComponentMap.values()) {
        this.wrapper.children.push(labelComp);
      }
    }
    if (this.showGraticule) {
      const stroke = color(this.strokeStyle);
      if (stroke) {
        stroke.opacity = 0.25;
      }
      this.graticulePathComp = new Path({
        path: this.graticulePath,
        strokeStyle: stroke?.toString(),
        fillStyle: "#0000",
      });
      this.wrapper.children.push(this.graticulePathComp);
    }
  }
Example #2
Source File: MapChart.ts    From anichart.js with MIT License 5 votes vote down vote up 
updatePath(sec: number) {
    if (this.showGraticule) {
      const graticulePath = this.geoGener(geoGraticule10());
      if (graticulePath) {
        this.graticulePathComp.path = graticulePath;
      }
    }
    for (const feature of this.map.features) {
      const mapId = feature.properties[this.mapIdField];
      const path = this.geoGener(feature);
      const comp = this.pathComponentMap.get(mapId);
      if (comp && path) {
        comp.path = path;
      }
      const label = this.labelComponentMap.get(mapId);
      if (label) {
        const center = this.geoGener.centroid(feature);
        const area = this.geoGener.area(feature);
        label.alpha = path ? this.labelAlphaScale(area) : 0;
        label.position.x = center[0];
        label.position.y = center[1];
      }
      if (label) {
        (label.children[0] as Text).text =
          this.dataScales?.get(mapId)?.(sec)[this.valueField] ||
          !this.noDataLabel
            ? this.labelFormat(mapId, this.meta, this.dataGroupByID)
            : this.noDataLabel;

        const width = canvasHelper.measure(label.children[0] as Text).width;
        (label as Rect).shape.width = width + this.labelPadding;
      }
    }
    for (const [id, data] of this.dataScales) {
      const mapId = this.getMapId(id);
      const currentValue = data(sec)[this.valueField];
      const rate = this.scale(currentValue);
      const color = this.visualMap(rate);
      const comp = this.pathComponentMap.get(mapId);

      if (comp) {
        comp.fillStyle = currentValue ? color : this.defaultFill;
        if (this.useShadow) {
          comp.shadow = {
            enable: true,
            blur: this.pathShadowBlur * rate + 1,
            color: this.pathShadowColor ?? color,
          } as ShadowOptions;
        }
      }
    }
  }