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