private setUpBulletsVertically()

in src/visual.ts [936:1032]


    private setUpBulletsVertically(bulletBody: BulletSelection<any>, model: BulletChartModel, reveresed: boolean) {
        let bars: BarData[] = model.bars;
        let rects: BarRect[] = model.barRects;
        let valueRects: BarValueRect[] = model.valueRects;
        let targetValues: TargetValue[] = model.targetValues;
        let barSelection: BulletSelection<any> = this.labelGraphicsContext.selectAll("text").data(bars, (d: BarData) => d.key);
        let rectSelection: BulletSelection<any> = this.bulletGraphicsContext.selectAll("rect.range").data(rects, (d: BarRect) => d.key);

        // Draw bullets
        let bullets: BulletSelection<any> = rectSelection
            .enter()
            .append("rect")
            .merge(rectSelection);

        bullets
            .attr("x", ((d: BarRect) => Math.max(BulletChart.zeroValue, bars[d.barIndex].x)))
            .attr("y", ((d: BarRect) => Math.max(BulletChart.zeroValue, this.calculateLabelHeight(bars[d.barIndex], d, reveresed))))
            .attr("height", ((d: BarRect) => Math.max(BulletChart.zeroValue, d.start - d.end)))
            .attr("width", BulletChart.BulletSize)
            .classed("range", true)
            .style("fill", (d: BarRect) => d.fillColor)
            .attr("stroke", (d: BarRect) => d.strokeColor)
            .attr("stroke-width", (d: BarRect) => d.strokeWidth);

        rectSelection.exit();

        // Draw value rects
        let valueSelection: BulletSelection<any> = this.bulletGraphicsContext.selectAll("rect.value").data(valueRects, (d: BarValueRect) => d.key);
        let valueSelectionMerged = valueSelection
            .enter()
            .append("rect")
            .merge(valueSelection)
            .attr("x", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, bars[d.barIndex].x + BulletChart.bulletMiddlePosition)))
            .attr("y", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, this.calculateLabelHeight(bars[d.barIndex], d, reveresed))))
            .attr("height", ((d: BarValueRect) => Math.max(BulletChart.zeroValue, d.start - d.end)))
            .attr("width", BulletChart.BulletSize * BulletChart.value1 / BulletChart.value4)
            .classed("value", true)
            .style("fill", (d: BarValueRect) => d.fillColor)
            .attr("stroke", (d: BarRect) => d.strokeColor)
            .attr("stroke-width", (d: BarRect) => d.strokeWidth);

        valueSelection.exit();
        // Draw markers
        this.drawFirstTargets(
            targetValues,
            (d: TargetValue) => bars[d.barIndex].x + BulletChart.MarkerMarginVertical,
            (d: TargetValue) => bars[d.barIndex].x + (BulletChart.MarkerMarginVertical * BulletChart.value3),
            (d: TargetValue) => this.calculateLabelHeight(bars[d.barIndex], null, reveresed) + d.value,
            (d: TargetValue) => this.calculateLabelHeight(bars[d.barIndex], null, reveresed) + d.value);
        this.drawSecondTargets(targetValues,
            (d: TargetValue) => bars[d.barIndex].x + BulletChart.BulletSize / BulletChart.value2,
            (d: TargetValue) => this.calculateLabelHeight(bars[d.barIndex], null, reveresed) + d.value2);
        let labelsStartPos: number =
            BulletChart.YMarginVertical +
            (reveresed ? model.viewportLength + 15 : 0) +
            this.data.labelHeightTop;
        this.drawAxes(model, reveresed, labelsStartPos);
        let measureUnitsText: string = TextMeasurementService.getTailoredTextOrDefault(
            BulletChart.getTextProperties(model.settings.axis.measureUnits, BulletChart.DefaultSubtitleFontSizeInPt),
            BulletChart.MaxMeasureUnitWidth);
        // Draw measure label
        if (model.settings.axis.measureUnits) {
            barSelection
                .enter()
                .append("text")
                .merge(barSelection)
                .attr("x", ((d: BarData) => d.x + BulletChart.BulletSize))
                .attr("y", ((d: BarData) => {
                    return labelsStartPos + BulletChart.SubtitleMargin + BulletChart.value12;
                }))
                .attr("fill", model.settings.axis.unitsColor)
                .attr("font-size", PixelConverter.fromPoint(BulletChart.DefaultSubtitleFontSizeInPt))
                .text(measureUnitsText);
        }
        if (this.interactivityService) {
            let targetCollection: BarRect[] = this.data.barRects.concat(this.data.valueRects);
            let behaviorOptions: BulletBehaviorOptions = {
                rects: bullets,
                valueRects: valueSelectionMerged,
                clearCatcher: this.clearCatcher,
                interactivityService: this.interactivityService,
                bulletChartSettings: this.data.settings,
                hasHighlights: this.data.hasHighlights,
                behavior: this.behavior,
                dataPoints: targetCollection
            };

            this.interactivityService.bind(behaviorOptions);
        }
        barSelection.exit();
        this.tooltipServiceWrapper.addTooltip(
            valueSelectionMerged,
            (tooltipEvent: TooltipEventArgs<TooltipEnabledDataPoint>) => tooltipEvent.data.tooltipInfo);
        this.tooltipServiceWrapper.addTooltip(
            bullets,
            (tooltipEvent: TooltipEventArgs<TooltipEnabledDataPoint>) => tooltipEvent.data.tooltipInfo);
    }