CODEWITHSUNDEEP
d3.js
Plumpie
Plumpie

Reputation: 466

D3js: two .append methods on the same selection can't be in the same line

The problem is that it would look prettier if the code here: 

var nodesgroup = svg.append("g")
  .attr('class', 'nodes')
  .selectAll('circle')
  .data(data['nodes'])
  .enter()
  .append('g');

nodesgroup.append('circle')
  .attr('r', 20)
  .call(d3.drag() //Define what to do on drag events
    .on("start", dragStarted)
    .on("drag", dragging)
    .on("end", dragEnded));

was on one line. But when you remove the nodesgroup of the second paragraph and the ; after the first paragraph, the circles do not longer get drawn. I don't know why as chaining these two paragraphs should be no different from first taking the output of the first paragraph and then taking each of these items and doing operation on them this way.

My understanding of what happens in the above code: the result of append('g') (a D3-selection) is stored in nodesgroup.

Then, in the second paragraph, for each of the elements in the selection, (because d3 has overridden append I assume?) .append('circle') gets executed.

Link to JSFiddle

Upvotes: 1

Views: 54

Answers (1)

altocumulus
altocumulus

Reputation: 21578

The circles are drawn; in your JSFiddle they can be seen in the top left corner. The problem is that by concatenating the two statements you are changing the contents of the selection contained in nodesgroup. Keeping it in two different statements, nodesgroup will contain a selection of newly appended g elements. If, on the other hand, concatenating both statements into one, the selection will contain the circle elements which are appended to the former group elements.

While the first approach works with your tick callback, the latter will break that tick function. The tick function expects the nodesgroup to contain group elements in order to select the circles and texts contained within. This is the reason why the circles are drawn but are not moving around according to the force layout.

Upvotes: 2

Related Questions