DC.JS Row chart show label at the end of the row

by Mo Qu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.7/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.7/dc.min.css">
<div id="chart"></div>

CSS

.dc-chart g.row text {fill: black;}

JavaScript

(function () {
    'use strict';

    const OFFSET = 70;
    const TITLE_ROW_CSS_CLASS = 'titlerow';

    let x;
    let extent;
    let extentWidth;
    let _rowData;

    let chartElem = dc.rowChart("#chart");

    let sizing = chart => {
        chart
            .width(window.innerWidth)
            .height(window.innerHeight)
            .redraw();
    };

    let resizing = chart => window.onresize = () => sizing(chart);

    function calculateAxisScale(chart, isInner) {

        _rowData = chart.data();

        extent = d3.extent(_rowData, chart.cappedValueAccessor);

        if (extent[0] > 0) extent[0] = 0;
        if (extent[1] < 0) extent[1] = 0;


        if (isInner) {
            extentWidth = [0];
        } else {
            chart.select('.axis').remove();

            extentWidth = [];

            chart
                .selectAll('.' + TITLE_ROW_CSS_CLASS)
                .each(function () {
                    extentWidth.push(this.getComputedTextLength());
                });

            // extentWidth = extentWidth.map()
        }

        extentWidth = d3.extent(extentWidth);

        x = d3.scale.linear().domain(extent)
            .range([0, chart.effectiveWidth() - extentWidth[1]]);

    }

    function rootValue() {
        let root = x(0);
        return (root === -Infinity || root !== root) ? x(1) : root;
    }

    let titleLabelOffsetEndOfRow = (chart) => {
        if (chart.renderTitleLabel()) {

            // cut row before label
            dc.transition(chart.selectAll('rect'), chart.transitionDuration(), chart.transitionDelay())
                .attr('width', d => Math.abs(rootValue() - x(chart.valueAccessor()(d))));

            // set label x
            chart.selectAll('.' + TITLE_ROW_CSS_CLASS)
                .attr('x', d => Math.abs(rootValue() - x(chart.valueAccessor()(d))) + extentWidth[1] - chart.titleLabelOffsetX());

        }
    };
    let data = [
        {key: "First", value: 0.72},
        {key: "Second",...