Source: drawSBCAxis.js

// source: http://jsfiddle.net/2khbceut/1/
// datajb = data from 1 club from 1 year in JSON format
// max_axis_value = the x axis maximum value
// pos = ranking of the club
/**
 * Renders the stacked bar chart axis
 * @param datajb data object to render containing the data of one club of one year
 * @param max_axis_value max absolute value for the stacked bar chart
 * @param drawid id of the element in which to draw the stacked bar chart
 */
function buildgraphicAxis(datajb, max_axis_value, drawid) {
    var svg = d3.select(drawid),
        margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = svg.attr("width") - margin.left - margin.right,
        height = svg.attr("height") - margin.top - margin.bottom;
    var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var i = 0;
    //var y = d3.scale.ordinal().rangeRoundBands([0, height], .3);
    //var y = d3.scaleBand().rangeRound([0, height]).padding(0.3);
   //  var y = d3.scaleOrdinal().range([0, height], .3);
    var x = d3.scaleLinear().range([0, width]);
    var color = d3.scaleOrdinal()
        .range([colors.kl, colors.ll, colors.ls, colors.sl, colors.ss, colors.ss, colors.sl, colors.ls, colors.ll, colors.kl]);
    // documentation axis: https://github.com/d3/d3-axis
    // https://stackoverflow.com/questions/13669239/remove-end-ticks-from-d3-js-axis#28176254
    var xAxis = d3.axisTop().scale(x).ticks(5).tickSizeOuter(0);
    console.log(xAxis);
    // var yAxis = d3.axisLeft().scale(y);
    //console.log(drawid);
    /*
    var svg = d3.select(drawid).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .attr("id", "d3-plot")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    */
    color.domain(["ENKL", "ENLL", "ENLS", "ENSL", "ENSS", "ESSS", "ESSL", "ESLS", "ESLL", "ESKL"]);
    var datajbEin = [datajb];
    /*
    console.log("StartdatajbEin");
    console.log(datajbEin);
    console.log("EnddatajbEin");
    */
    // TODO schleife wird immer nur einmal ausgefuehrt
    datajbEin.forEach(function (d) {
        if (drawid.includes("_2012_10")) {
            //max_axis_value = 71;
            //console.log(drawid + " max: " + max_axis_value);
            var essum = parseInt(d["ESSS"]) + parseInt(d["ESLS"]) + parseInt(d["ESSL"]) + parseInt(d["ESLL"]) + parseInt(d["ESKL"]);
            var ensum = parseInt(d["ENSS"]) + parseInt(d["ENLS"]) + parseInt(d["ENSL"]) + parseInt(d["ENLL"]) + parseInt(d["ENKL"]);
            //console.log("ESSS " + d["ESSS"] + " ESLS " + d["ESLS"] + " ESSL " + d["ESSL"] + " ESLL " + d["ESLL"] + " ESKL " + d["ESKL"] + " Summe " + essum + " ES " + d["ES"]);
            //console.log("ENSS " + d["ENSS"] + " ENLS " + d["ENLS"] + " ENSL " + d["ENSL"] + " ENLL " + d["ENLL"] + " ESKL " + d["ESKL"] + " Summe " + ensum + " EN " + d["EN"]);
        }
        //console.log("Frankreich");
        //console.log(d);
        // calc percentages
        var len = d["ES"] + d["EN"];
        d["ENSS"] = +d["ENSS"];
        d["ENSL"] = +d["ENSL"];
        d["ENLS"] = +d["ENLS"];
        d["ENLL"] = +d["ENLL"];
        d["ENKL"] = +d["ENKL"];
        d["ESLL"] = +d["ESLL"];
        d["ESLS"] = +d["ESLS"];
        d["ESSL"] = +d["ESSL"];
        d["ESSS"] = +d["ESSS"];
        d["ESKL"] = +d["ESKL"];
        // TODO edit here
        var x0 = -1 * d["EN"];
        var idx = 0;
        d.boxes = color.domain().map(function (name) {
            return {name: name, x0: x0, x1: x0 += +d[name]};
        });
    });
    var min_val = d3.min(datajbEin, function (d) {
        return (-1) * max_axis_value;
    });
    var max_val = d3.max(datajbEin, function (d) {
        return max_axis_value;
    });
    x.domain([min_val, max_val]);
   /* y.domain(datajbEin.map(function (d) {
        return d.name;
    }));*/
    x.domain([min_val, max_val]);
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0,20)")
        .attr("width", 5)
        .call(xAxis);
    /*svg.append("g")
        .attr("class", "y axis")
        .call(yAxis); // */
    var vakken = svg.selectAll(".name")
        .data(datajbEin)
        .enter().append("g")
        .attr("class", "bar")
        /*
        .attr("transform", function (d) {
            return "translate(0," + " " + ")";
        })//*/;
    //console.log(vakken);
    var bars = vakken.selectAll("rect")
        .data(function (d) {
            return d.boxes;
        })
        .enter().append("g").attr("class", "subbar"); // */
/*
    bars.append("rect")
        .attr("height", 0) // y.rangeBand()/2
        .attr("stroke-width", function (d) {
            return 0;
        })
        .attr("x", function (d) {
            if (isNaN(d.x0)) {
                console.log("x" + i++);
                console.log(d);
            }
            return x(d.x0);
        })
        .attr("width", function (d) {
            if (isNaN(x(d.x0)) || isNaN(x(d.x1))) {
                console.log("width" + i++);
                console.log(d);
            }
            return x(d.x1) - x(d.x0);
        })
        .style("fill", function (d) {
            return color(d.name);
        }); // */
    //console.log(bars);
    // Beschriftung // remove Numbers here
    bars.append("text")
        .attr("x", function (d) {
            return x(d.x0);
        })
        .attr("y", height / 2) // rangeBand()/2
        .attr("dy", "0.5em")
        .attr("dx", "0.5em")
        .style("font", "10px sans-serif")
        .style("text-anchor", "begin")
        .text(function (d) {
            return d.n !== 0 && (d.x1 - d.x0) > 3 ? d.n : ""
        });
    // this is not nice, we should calculate the bounding box and use that
    var movesize = width / 2 - width / 2;//startp.node().getBBox().width/2;
    d3.selectAll(".legendbox").attr("transform", "translate(" + movesize + ",0)");
}