3

I am attempting to modify this D3 example to add labels to the nodes. Here is a fiddle replicating the code from the example.

I believe I need to edit the start() function since it is what is being called every time the node and edge data updates:

function start() {
  link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
  link.enter().insert("line", ".node").attr("class", "link");
  link.exit().remove();

  node = node.data(force.nodes(), function(d) { return d.id;});
  node.enter().append("circle").attr("class", function(d) { return "node " + d.id; }).attr("r", 8).call(force.drag);
  node.exit().remove();

  force.start();
}

I've tried re-writing the node part of the start() function to append a group element (as suggested by this stackoverflow answer, and then add both the text and circle nodes to the group:

  node = node.data(force.nodes(), function(d) { return d.id;});

  // Append a group element
  node.enter().append("g");

  // Append text to the group element
  node.append("text").text(function(d) { return d.id ;});

  // Append circle to the group element
  node.enter().append("circle")
    .attr("class", function(d) { return "node " + d.id; })
    .attr("r", 8);

  // Transform the group to proper location
  node.attr("transform", function(d) {
    return 'translate(' + [d.x, d.y] + ')';
  });

  node.exit().remove();

The text node is being added correctly, but the groups are not translating to the correct locations in the figure.

I've updated the fiddle to show my current (non-working) approach.

Community
  • 1
  • 1
sirwebber
  • 157
  • 1
  • 9
  • It appears to me as if your text is getting added to the circle, but the circle is not contained in the group. Inspect using your browser tools. But I'm not sure exactly how to fix it. – Marc Sep 30 '15 at 22:16
  • 1. Why don't you include your attempted solution code in your attempted solution fiddle?? 2. The position of the elements of the structure are aligned with the data in the tick function. You will need to apply transforms to your g elements instead of directly positioning the circles. – Cool Blue Oct 01 '15 at 01:46
  • Thanks for the feedback @CoolBlue ! I've updated the link to be what I've attempted. – sirwebber Oct 01 '15 at 18:26

1 Answers1

1

In your tick function, if you translate the node instead of the group I believe it works as you would expect:

function tick() {

  node.attr("transform", function(d) {
    return 'translate(' + [d.x, d.y] + ')'; 
  });


  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
}

fiddle: http://jsfiddle.net/7br2t162/

Stacey Burns
  • 1,092
  • 7
  • 14
  • Thanks for the help! I think that is almost there, but in the D3 example a node is supposed to reappear after 6 seconds. That's not happening. Any idea? – sirwebber Oct 01 '15 at 14:48
  • 1
    In the console, its giving an 'not found' error on this line when trying to add: link.enter().insert("line", ".node").attr("class", "link"). If you remove the push to the links in your function you can see the circle is correctly added back. I'll have a play around with it to see if I can figure out. – Stacey Burns Oct 01 '15 at 15:05
  • 1
    There ended up being quite a few issues, but the main thing had to do with how I was referencing the links. I was using objects as the values, instead of the index in the nodes array. I'm not too happy with my solution, but here is the [fiddle](http://jsfiddle.net/sirwebber/0s1e2zm5/4/) if it is helpful for anyone else. – sirwebber Oct 01 '15 at 23:01