How to set the label for each vertical axis in a parallel coordinates visualization?

Question

I'm new to d3.js (and stackoverflow) and I'm currently working through the parallel coordinates example. I'm currently using a 2d array named 'row' for the data. Above each vertical axis is the label '0' or '1' or '2', etc. However, I'd like each vertical axis to be labeled with the text in row[0][i]. I believe the numbers 0,1,2 are coming from the datum. Any suggestions on how I may use the labels in row[0][i] instead? I suspect I'm doing something wrong that's pretty basic. Here's the relevant code. Thanks !

    // Extract the list of expressions and create a scale for each.
    x.domain(dimensions = d3.keys(row[0]).filter(function (d, i) {
        return row[0][i] != "name" &&
            (y[d] = d3.scale.linear()
                .domain(d3.extent(row, function (p) { return +p[d]; }))
                .range([height, 0]));
    }));

    // Add a group element for each dimension.
    var g = svg.selectAll(".dimension")
                .data(dimensions)
                .enter().append("g")
                .attr("class", "dimension")
                .attr("transform", function (d) { return "translate(" + x(d) + ")"; });

    // Add an axis and title.
    g.append("g")
            .attr("class", "axis")
            .each(function (d) { d3.select(this).call(axis.scale(y[d])); })
            .append("text")
            .attr("text-anchor", "middle")
            .attr("y", -9)
            .text(String);//.text(String)

Answer 1

If you only have a controlled set of Axis (like three axis), you may just want to set them up, individually, as follows...

svg.append("text").attr("class","First_Axis")
    .text("0")
    .attr("x", first_x_coordinate)
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

svg.append("text").attr("class","Second_Axis")
    .text("1")
    .attr("x", first_x_coordinate + controlled_offset)
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

svg.append("text").attr("class","Third_Axis")
    .text("2")
    .attr("x", first_x_coordinate + controlled_offset*2)
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

However, if you have dynamically placed axis that rely on the data, you may want to place the axis info using a function that holds the y coordinate constant while determining the x coordinate based on a fixed "offset" (i.e. data driven axis placement). For example...

svg.append("text")
    .attr("class",function(d, i) {return "Axis_" + i; })
    .text(function(d,i) {return i; })
    .attr("x", function(d, i) { return (x_root_coordinate + x_offset_value*i); })
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

I hope this helps.

Frank