in src/visual.ts [672:755]
private drawAxesLabels(model: BulletChartModel, reversed: boolean) {
let bars: BarData[] = model.bars;
let barSelection: BulletSelection<any> = this.labelGraphicsContext
.selectAll("text")
.data(bars, (d: BarData) => d.key);
// Draw axes
if (model.settings.axis.axis) {
// Using var instead of let since you can"t pass let parameters to functions inside loops.
// needs to be changed to let when typescript 1.8 comes out.
for (let idx: number = 0; idx < bars.length; idx++) {
const axisColor = model.settings.axis.axisColor;
let bar: BarData = bars[idx],
barGroup = this.bulletGraphicsContext.append("g");
barGroup
.append("g")
.attr("transform", () => {
let xLocation: number = this.calculateLabelWidth(
bar,
null,
reversed
);
let yLocation: number = bar.y + BulletChart.BulletSize;
return "translate(" + xLocation + "," + yLocation + ")";
})
.classed("axis", true)
.call(bar.xAxisProperties.axis)
.style("fill", axisColor)
.style(
"font-size",
PixelConverter.fromPoint(BulletChart.AxisFontSizeInPt)
)
.selectAll("line")
.style("stroke", axisColor);
barGroup.selectAll("path.bullet").style("stroke", axisColor);
barGroup.selectAll(".tick line").style("stroke", axisColor);
barGroup.selectAll(".tick text").style("fill", axisColor);
barGroup
.selectAll(".tick text")
.call(
AxisHelper.LabelLayoutStrategy.clip,
bar.xAxisProperties.xLabelMaxWidth,
TextMeasurementService.svgEllipsis
);
}
}
// Draw Labels
if (model.settings.labels.show) {
barSelection
.enter()
.append("text")
.merge(barSelection)
.classed("title", true)
.attr("x", (d: BarData) => {
if (reversed)
return (
BulletChart.XMarginHorizontalLeft +
BulletChart.XMarginHorizontalRight +
model.viewportLength
);
return d.x;
})
.attr(
"y",
(d: BarData) =>
d.y +
this.baselineDelta +
BulletChart.BulletSize / BulletChart.value2
)
.attr("fill", model.settings.labels.labelColor)
.attr(
"font-size",
PixelConverter.fromPoint(model.settings.labels.fontSize)
)
.text((d: BarData) => d.categoryLabel)
.append("title")
.text((d: BarData) => d.categoryLabel);
}
}