1

Is there a way to add labels to the groups for the d3-cola force layout example here

I have added tooltips:

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

I tried adding this part:

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

And then in the tick function:

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

But it doesn't show up.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
user10167524
  • 21
  • 1
  • 1
    a rect can't have a text subtag. Append a new text tag based on the attributes or datum of the rect to the svg with a `groupText.each()` – rioV8 Aug 01 '18 at 21:00
  • 1
    @rioV8 Thanks for the advice! I added the following, the tooltip works but the text, i.e. d.id does not show up: – user10167524 Aug 02 '18 at 02:08
  • var group = svg.selectAll(".group") .data(groups) .enter().append("g") .append("rect") .classed("group", true) .attr("rx",20) .attr("ry",20) .style("fill", function (d) { return color(d.id); }) .call(cola.drag); group.append("text") .attr("x", function(d) { return d.bounds.x + d.bounds.width()/2}) .attr("y", function(d) { return d.bounds.y + d.bounds.height()/2}) .text(function(d) { return d.id; }); – user10167524 Aug 02 '18 at 02:10
  • 1
    `var group = svg.selectAll(".group") .data(groups) .enter().append("g"); group.append("rect") .classed("group", true) .attr("rx",20) .attr("ry",20) .style("fill", function (d) { return color(d.id); }) .call(cola.drag); group.append("text") .attr("x", function(d) { return d.bounds.x + d.bounds.width()/2}) .attr("y", function(d) { return d.bounds.y + d.bounds.height()/2}) .text(function(d) { return d.id; });` To be sure the text is appended to the `g` element. `group` === the selection with the `g` elements and not the `rects` – rioV8 Aug 02 '18 at 02:25
  • The labels show up but the rectangles bounding the nodes are now not showing! – user10167524 Aug 02 '18 at 02:38
  • 1
    `var group = svg.selectAll(".group") .data(groups) .enter().append("g") .classed("group", true); group.append("rect") .classed("grouprect", true) .attr("rx",20) .attr("ry",20) .style("fill", function (d) { return color(d.id); }) .call(cola.drag); group.append("text") .classed("grouptext", true) .attr("x", function(d) { return d.bounds.x + d.bounds.width()/2}) .attr("y", function(d) { return d.bounds.y + d.bounds.height()/2}) .text(function(d) { return d.id; });` The `g` elements get the `group` class, the `rect` gets class `grouprect` and `text` gets class `grouptext` – rioV8 Aug 02 '18 at 02:54
  • 1
    Interestingly now both labels and rectangles are not showing up – user10167524 Aug 02 '18 at 13:33
  • 1
    Do i need to define a new var groupRect as well? – user10167524 Aug 02 '18 at 13:49
  • Did anyone ever get this working? A Plunk would be hextreemely lpful and gratefully appreciated. I just discovered webcola, thought it was the answer to my prayers and am now cursing it's lack of documentation. It may be time to move on ... – Mawg says reinstate Monica Jan 22 '21 at 18:59

0 Answers0