Labels Under Paths

[rachael-ross]

I'm having an issue where the labels are showing up underneath some of the paths. Notice in the diagram below, the "Veterans" label is underneath the two adjacent paths.

How can we ensure that all labels are positioned above all nearby / intersecting paths?

[rachael-ross]

Actually, I figured out the solution. I modified the venn.js code in the "chart function" to append the text elements as direct descendents of svg (instead of g) and only after all g elements were added to svg. Since each text element is given x & y coordinates relative to svg, it seems to work perfectly.

Replaced this:

 var enterPath = enter.append("path");
       enterText = enter.append("text")
           .attr("class", "label")
           .text(function (d) { return label(d); })
          .attr("text-anchor", "middle")
          .attr("dy", ".35em")
          .attr("x", width / 2)
          .attr("y", height / 2);   

With this:

var enterPath = enter.append("path");
var enterText = nodes.enter().append("text") 
                .attr("class", "label")
                .text(function (d) { return label(d); })
                .attr("text-anchor", "middle")
                .attr("dy", ".35em")
                .attr("x", width / 2)
                .attr("y", height / 2);

Resulting change:

[benfred]

Nice! Glad you found something that worked for you.

Unfortunately that change will break some of the examples. For instance the 'examples/sublabels.html' file won't have the labels removed on exit with your change. I'm going to leave this open for now.