Nsryjdtyk

This baffles me. I am trying to use the "dy" attribute on my d3 chart to align the labels with the ticks on this horizontal bar chart.

The documentation says:

The dy attribute indicates a shift along the y-axis on the position of an element or its content.

Here is the javascript. It pulls the text from the "Question" part of an array.

ticks.append("text")

    .attr("class", "ylabel")        

    .attr("dy", "0em")

    .attr("x", -9)

    .attr("fill", "#000")

    .style("text-anchor", "end")

    .style("font-size", "x-small")

    .text(function(d) {  return d['Question']; })

    .call(wrap, 600); 

Since it's easier to illustrate, when I use "0em", "1em" or "2em" on "dy" I get very different effects. "0em" is too high. "1em" squishes multiple lines together (because of the wrap function), and "2em" wraps the text UPWARDS instead of downwards.

So how do I shift the labels to align with the ticks on the chart?

update

by systematically removing lines of javascript in the header, I found that the word_wrap function is pushing this text up and down in weird ways, making it hard to align with the node.

function wrap(text, width) {

    text.each(function() {

        var text = d3.select(this),

        words = text.text().split(/s+/).reverse(),

        word,

        line = ,

        lineNumber = 0,

        lineHeight = -2.0, // ems

        x = text.attr("x"), //<-- include the x!

        y = text.attr("y"),

        dy = parseFloat(text.attr("dy")),

        tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy - 2.5 + "em");

        while (word = words.pop()) {

            line.push(word);

            tspan.text(line.join(" "));

            if (tspan.node().getComputedTextLength() > width) {

                line.pop();

                tspan.text(line.join(" "));

                line = [word];

                tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", lineHeight - dy + 3 + "em").text(word);

            }

        }

    });

}



function cwrap(text, width) {

  text.each(function() {

    var text = d3.select(this),

        words = text.text().split(/s+/).reverse(),

        word,

        line = ,

        lineNumber = 0,

        lineHeight = 1.1, // ems

        x = text.attr("x"),

        y = text.attr("y"),

        dy = parseFloat(text.attr("dy")),

        tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");

    while (word = words.pop()) {

      line.push(word);

      tspan.text(line.join(" "));

      if (tspan.node().getComputedTextLength() > width) {

        line.pop();

        tspan.text(line.join(" "));

        line = [word];

        tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);

      }

    }

  });

}

By using cwrap instead of wrap I was able to make this work. Both functions are imperfect, and only work with text of a limited size (either 3 lines or 2 lines max). But it solved my problem.

In my experience it has been dX that you need to dynamically set to make things appear relative to others in D3. Here is an example of how I get labels to appear next to nodes on a Force Directed Graph

label = label.enter().append("text")

            .attr("class", "label")

            .attr("dx", function (d) { return d.radius * 1.25; })

            .attr("dy", ".35em")

            .attr("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; })

            .attr("font-weight", "normal")

            .style("font-size", 10)

            .text(function (d) { return d.id; })

            .merge(label);

The dX value is what you want to base off of what is being drawn, though without seeing the code regarding how the rest of the graph is drawn I'm not sure what attribute of your other elements you should base it off of.

In my specific case, the wrap function was forcing text to be misaligned with ticks on my chart in weird ways (including wrapping text upwards if the "dy" offset was "2em"). I had to adjust the wrap function to fix the "dy" problem.