javascript - 如何向静态 venn.js 图表添加子标签？

Question

有人告诉我 Venn.js GitHub 上的脚本，它使用 javascript 在 html 页面上创建维恩图。

我有一个基本的脚本在工作，但我想在每个集合和交集中添加一个显示其大小的子标签

    function LoadVenn() {            
        // size values are variables filled by an $.ajax() function.
        // this is called in the $.ajax() success block.
        var sets = [
                    { sets: ['Less than Quarter'], size: ltq },
                    { sets: ['Quarter'], size: qtr },
                    { sets: ['Semester'], size: sem },
                    { sets: ['Year'], size: year },
                    { sets: ['Less than Quarter', 'Quarter'], size: ltqQtr },
                    { sets: ['Less than Quarter', 'Semester'], size: ltqSem },
                    { sets: ['Less than Quarter', 'Year'], size: ltqYear }
        ];

        // the chart is accurately created.
        var chart = venn.VennDiagram();
        d3.select("#venn").datum(sets).call(chart);

        // fill colors are good.
        d3.selectAll("#venn .venn-circle path").style("fill-opacity", 0.8);
        d3.selectAll("#venn text").style("fill", "white");

        // need to make label text larger
        // need to add sublabel showing set size
    }

我确实找到了一个子标签示例 here ，但这是一个无休止循环的动画图表(我不想要)。

如何向静态和非动画图表添加子标签？

Answer 1

基于动画子标签示例和来自 here 的示例代码:

var sets = [
  {sets:["Information"], size: 12},
  {sets:["Overlap"], size: 12},
  {sets:["Circles"], size: 12},
  {sets: ["Information", "Overlap"], size: 4, label: "Redundancy"}
];
    
var chart = venn.VennDiagram()
    .wrap(false)
    .fontSize("16px")
    .width(640)
    .height(640);
    
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");
}     

function updateVenn(sets) {
    var div = d3.select("#venn").datum(sets);
    var layout = chart(div),
        textCentres = layout.textCentres;
    div.selectAll(".label").style("fill", "white");
    div.selectAll(".venn-circle path").style("fill-opacity", .6);

	div.selectAll("g").transition("venn").each("end", annotateSizes).duration(0);
        
    return layout;
}

updateVenn(sets);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://rawgit.com/benfred/venn.js/master/venn.js"></script>


<div id="venn"></div>