in src/visual.ts [1020:1102]
private renderXAxis(data: ChartData, duration: number): void {
let axisNodeSelection: Selection<any>,
axisNodeUpdateSelection: Selection<any>,
axisBoxUpdateSelection: Selection<any>,
color: string = data.settings.xAxis.color,
fontColor: string = data.settings.xAxis.fontColor;
axisNodeSelection = this.chart
.select(Visual.LineNode.selectorName)
.selectAll(Visual.XAxisNode.selectorName);
axisNodeSelection.selectAll("*").remove();
axisNodeUpdateSelection = axisNodeSelection.data(data.series);
let axisNodeUpdateSelectionMerged = axisNodeUpdateSelection
.enter()
.insert("g", `g.${Visual.LineContainer.className}`)
.merge(axisNodeUpdateSelection);
axisNodeUpdateSelectionMerged.classed(Visual.XAxisNode.className, true);
axisNodeUpdateSelectionMerged
.each(function (series: Series) {
d3Select(this).call(series.xAxisProperties.axis);
});
axisBoxUpdateSelection = axisNodeUpdateSelectionMerged
.selectAll(".tick")
.selectAll(".axisBox")
.data([[]]);
let axisBoxUpdateSelectionMerged = axisBoxUpdateSelection
.enter()
.insert("rect", "text")
.merge(axisBoxUpdateSelection);
axisBoxUpdateSelectionMerged
.style("display", this.data.settings.xAxis.position === XAxisPosition.Center ? "inherit" : "none")
.style("fill", this.data.settings.xAxis.backgroundColor);
let tickRectY = this.data.settings.xAxis.position === XAxisPosition.Center ? -11 : 0;
axisBoxUpdateSelectionMerged.attr("x", -(this.data.widthOfXAxisLabel / 2))
.attr("y", tickRectY + "px")
.attr("width", this.data.widthOfXAxisLabel)
.attr("height", Visual.XAxisTickHeight + "px");
axisBoxUpdateSelectionMerged
.exit()
.remove();
axisNodeUpdateSelectionMerged
.style("stroke", this.data.settings.xAxis.position === XAxisPosition.Center ? color : "none")
.style("display", this.data.settings.xAxis.show ? "inherit" : "none");
axisNodeUpdateSelectionMerged.call(selection => {
let rotate = selection.datum().xAxisProperties.rotate;
let rotateCoeff = rotate ? Math.abs(Math.sin(Visual.AxisTickRotateAngle * Math.PI / 180)) : 0;
let dy = tickRectY + 3;
selection.selectAll("text")
.attr("transform", function (element: SVGTextElement): string {
let node = <SVGTextElement>this;
return `translate(0, ${(dy + 9 + node.getBoundingClientRect().width * rotateCoeff)}) rotate(${rotate ? Visual.AxisTickRotateAngle : 0})`;
})
.style("fill", fontColor)
.style("stroke", "none")
.attr("dy", -9);
});
axisNodeUpdateSelectionMerged.selectAll(".domain")
.each(function () {
let node = <Node>this;
node.parentNode.insertBefore(node, node.parentNode.firstChild);
})
.style("stroke", color);
let xAxisTop: number = this.size.height;
switch (this.data.settings.xAxis.position) {
case XAxisPosition.Center:
xAxisTop = xAxisTop / 2;
break;
case XAxisPosition.Bottom:
break;
}
axisNodeUpdateSelectionMerged.attr("transform", manipulation.translate(0, xAxisTop));
}