Easiest way to add more text below label

[ben-pr-p]

Hi – I'd like to add some more text below each label (a little reference to the contents of each circle).

Is there a way to do this without modifying the code?

[benfred]

This appends an extra tspan below each label with the size of the area

function annotateSizes() {
    d3.select(this).select("text")
        .append("tspan")
        .text(function(d) { return "size " + d.size; })
        .attr("x", function() { return d3.select(this.parentNode).attr("x"); })
        .attr("dy", "1.5em")
        .style("fill", "#666")
        .style("font-size", "10px");
}
div.selectAll("g").transition("venn").each("end", annotateSizes).duration(0);

There might be an easier way of doing this, the 'transition' thing is a bit of a hack. Appending to the 'examples/venn_venn.html' file produces this output:

[ben-pr-p]

It works until the circles start moving – after that, the tspan element gets removed. It happens on some timeout – I'll try to get more information.

I could always wait until the circles on done moving to render the text, but that's not preferable.

[benfred]

I added an example with transitions for this: http://benfred.github.io/venn.js/examples/sublabels.html

This required making some minor changes to the library (a13bab7) so you'll need to get the latest version if you want to go this route. hope this helps =)

[ben-pr-p]

Thanks! I've got the sublabels working exactly as desired now.

However, is there something in the latest commit that would've changed the way hover on intersection works? Even when not including the new sublabels feature, my old hover on intersection code is not working like it was before.

[ben-pr-p]

It seems as if the svg path element on venn-intersection is not being created correctly – the text is added in the right place, however.

Take a look:

[ben-pr-p]

I double checked and this issue was not present in 050d9ad

[ben-pr-p]

I put some debugger statements in and found that venn.intersectionAreaPath is not being called on the initial circle creation in a13bab7 but is in 050d9ad

[ben-pr-p]

Figured it out – a simple change – https://github.com/benfred/venn.js/blob/master/src/diagram.js#L92 should read
update.select("path") instead of update.select(".venn-circle path").

Was there a reason you made that change? The label rendering still works properly with path only.

[benfred]

sorry about that - didn't mean to check that in =( the indentation level changed, so I didn't spot it in the diff.

thanks for fixing!

[ben-pr-p]

Sublabels work better when you "retext" the labels on update – they refresh if the sizes have changed. For example:

// move existing
    layout.update
        .select(".sublabel")
        .text(function(d) { 
          if (d.size == 0.9) return "0 opinions"; 
          else return (d.size) + ' opinions'; }) // 0.9 is the marker for 0
        .style("font-size", "10px")
        .attr("dy", "18")
        .attr("x", function(d) {
            return Math.floor(textCentres[d.sets].x);
        })
        .attr("y", function(d) {
            return Math.floor(textCentres[d.sets].y);
        });