private drawTicks()

in src/chordChart.ts [1097:1183]


  private drawTicks(): void {
    if (this.settings.axis.show) {
      let animDuration: number =
        this.data.prevAxisVisible === this.settings.axis.show
          ? this.duration
          : 0;

      let tickShapes: Selection<any, any, any, any> =
        this.mainGraphicsContext
          .select(ChordChart.ticksClass.selectorName)
          .selectAll("g" + ChordChart.sliceTicksClass.selectorName)
          .data(this.data.groups);

      tickShapes.exit().remove();

      tickShapes = tickShapes.merge(
        tickShapes
          .enter()
          .append("g")
          .classed(ChordChart.sliceTicksClass.className, true)
      );

      let tickPairs = tickShapes
        .selectAll("g" + ChordChart.tickPairClass.selectorName)
        .data((d: ChordArcDescriptor) => d.angleLabels);

      tickPairs.exit().remove();

      tickPairs = tickPairs.merge(
        tickPairs
          .enter()
          .append("g")
          .classed(ChordChart.tickPairClass.className, true)
      );

      tickPairs.attr("transform", (d) =>
        translateAndRotate(
          this.innerRadius,
          0,
          -this.innerRadius,
          0,
          (d.angle * 180) / Math.PI - 90
        )
      );

      let tickLines = tickPairs
        .selectAll("line" + ChordChart.tickLineClass.selectorName)
        .data((d) => [d]);

      tickLines.exit().remove();
      tickLines = tickLines.merge(
        tickLines
          .enter()
          .append("line")
          .classed(ChordChart.tickLineClass.className, true)
      );

      tickLines
        .style("stroke", ChordChart.DefaultTickLineColorValue)
        .attr("x1", 1)
        .attr("y1", 0)
        .attr("x2", 5)
        .attr("y2", 0)
        .merge(tickLines);

      let tickText = tickPairs
        .selectAll("text" + ChordChart.tickTextClass.selectorName)
        .data((d) => [d]);

      tickText.exit().remove();

      tickText = tickText.merge(tickText.enter().append("text"));

      tickText
        .classed(ChordChart.tickTextClass.className, true)
        .attr("x", ChordChart.DefaultTickShiftX)
        .attr("dy", ChordChart.DefaultDY)
        .text((d) => (<any>d).label)
        .style("text-anchor", (d) => ((<any>d).angle > Math.PI ? "end" : null))
        .style("fill", this.settings.axis.color)
        .attr("transform", (d) =>
          (<any>d).angle > Math.PI ? "rotate(180)translate(-16)" : null
        );
    } else {
      this.clearTicks();
    }
  }