Easiest way to add more text below label about venn.js HOT 10 CLOSED

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:

from venn.js.

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.

from venn.js.

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 =)

from venn.js.

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.

from venn.js.

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:

from venn.js.

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

from venn.js.

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

from venn.js.

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.

from venn.js.

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!

from venn.js.

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);
        });

from venn.js.