在d3强制布局中向组添加标签

时间:2018-08-01 20:54:07

标签: d3.js webcola

是否可以在此处为d3-cola力布局示例的组添加标签:

http://ialab.it.monash.edu/webcola/examples/smallworldwithgroups.html

我添加了工具提示:

        var group = svg.selectAll(".group")
            .data(groups)
            .enter().append("rect")
            .classed("group", true)
            .attr("rx",20)
            .attr("ry",20)
            .style("fill", function (d) { return color(d.id); })
            .call(cola.drag);

        group.append("title")
            .text(function (d) { return d.id; });

我尝试添加此部分:

        var groupText = svg.selectAll(".group")
            .append("text")
            .attr("class", "link-label")
            .attr("font-family", "Arial, Helvetica, sans-serif")
            .attr("fill", "Black")
            .style("font", "normal 9px Arial")
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .text(function(d) {
              return (d.id);
            });

然后在刻度功能中:

             groupText
                 .attr("x", function(d) {
                     return ((d.bounds.x + d.bounds.width())/2);
                 })
                 .attr("y", function(d) {
                     return ((d.bounds.y + d.bounds.height())/2);
                 });

但是它没有出现。任何建议都会很棒!

0 个答案:

没有答案