score:7

Accepted answer

actually this seems to working (just added and svg element and centered the nodes)

edit

for v4 you need to merge selections, see below:

var nodes = [{
  "oe": 1,
  "name": 'test'
}, {
  "oe": 1,
  "name": 'test2'
}, {
  "oe": 0,
  "name": 'test3'
}]

//join 
var nodegroups = d3.select('svg').append('g')
 .attr('transform', 'translate(50, 50)')
 .selectall('g.nodegroup').data(nodes);

//enter
var nodegroupsenter = nodegroups.enter().append('g').attr("class", "nodegroup");

nodegroupsenter.append("circle");
nodegroupsenter.append("text");

//update
nodegroups.merge(nodegroupsenter).select("circle")
  .attr("r", 4)
  .attr("class", function(d) {
    return ((d.oe) ? " oe" : "");
  });

nodegroups.merge(nodegroupsenter).select("text")
  .text(function(d) {
    return d.name;
  })
  .attr("text-anchor", "top")
  .attr("y", 10)
  .attr("dy", -15);

//exit
nodegroups.exit().remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<svg width="100" height="100"></svg>


Related Query

More Query from same tag