javascript - Adding class to root node in d3js tree layout -

i'm playing around d3 js tree layout. following this example.

i trying add class attribute each of node. how can add 1 class root node , different class children node.

var treedata = [{    "name": "top level",    "parent": "null",    "children": [{      "name": "level 2: a",      "parent": "top level",      "children": [{        "name": "son of a",        "parent": "level 2: a"      }, {        "name": "daughter of a",        "parent": "level 2: a"      }]    }, {      "name": "level 2: b",      "parent": "top level"    }]  }];      // ************** generate tree diagram	 *****************  var margin = {      top: 20,      right: 120,      bottom: 20,      left: 120    },    width = 960 - margin.right - margin.left,    height = 500 - margin.top - margin.bottom;    var = 0,    duration = 750,    root;    var tree = d3.layout.tree()    .size([height, width]);    var diagonal = d3.svg.diagonal()    .projection(function(d) {      return [d.y, d.x];    });    var svg = d3.select("body").append("svg")    .attr("width", width + margin.right + margin.left)    .attr("height", height + margin.top + margin.bottom)    .append("g")    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    root = treedata[0];  root.x0 = height / 2;  root.y0 = 0;    update(root);    d3.select(self.frameelement).style("height", "500px");    function update(source) {      // compute new tree layout.    var nodes = tree.nodes(root).reverse(),      links = tree.links(nodes);      // normalize fixed-depth.    nodes.foreach(function(d) {      d.y = d.depth * 180;    });      // update nodes…    var node = svg.selectall("g.node")      .data(nodes, function(d) {        return d.id || (d.id = ++i);      });      // enter new nodes @ parent's previous position.    var nodeenter = node.enter().append("g")      .attr("class", "node")      .attr("transform", function(d) {        return "translate(" + source.y0 + "," + source.x0 + ")";      })      .on("click", click);      nodeenter.append("circle")      .attr("r", 1e-6)      .style("fill", function(d) {        return d._children ? "lightsteelblue" : "#fff";      })      .attr("class","node"); // adding class here - common      nodeenter.append("text")      .attr("x", function(d) {        return d.children || d._children ? -13 : 13;      })      .attr("dy", ".35em")      .attr("text-anchor", function(d) {        return d.children || d._children ? "end" : "start";      })      .text(function(d) {        return d.name;      })      .style("fill-opacity", 1e-6);      // transition nodes new position.    var nodeupdate = node.transition()      .duration(duration)      .attr("transform", function(d) {        return "translate(" + d.y + "," + d.x + ")";      });      nodeupdate.select("circle")      .attr("r", 10)      .style("fill", function(d) {        return d._children ? "lightsteelblue" : "#fff";      });      nodeupdate.select("text")      .style("fill-opacity", 1);      // transition exiting nodes parent's new position.    var nodeexit = node.exit().transition()      .duration(duration)      .attr("transform", function(d) {        return "translate(" + source.y + "," + source.x + ")";      })      .remove();      nodeexit.select("circle")      .attr("r", 1e-6);      nodeexit.select("text")      .style("fill-opacity", 1e-6);      // update links…    var link = svg.selectall("path.link")      .data(links, function(d) {        return d.target.id;      });      // enter new links @ parent's previous position.    link.enter().insert("path", "g")      .attr("class", "link")      .attr("d", function(d) {        var o = {          x: source.x0,          y: source.y0        };        return diagonal({          source: o,          target: o        });      });      // transition links new position.    link.transition()      .duration(duration)      .attr("d", diagonal);      // transition exiting nodes parent's new position.    link.exit().transition()      .duration(duration)      .attr("d", function(d) {        var o = {          x: source.x,          y: source.y        };        return diagonal({          source: o,          target: o        });      })      .remove();      // stash old positions transition.    nodes.foreach(function(d) {      d.x0 = d.x;      d.y0 = d.y;    });  }    // toggle children on click.  function click(d) {    if (d.children) {      d._children = d.children;      d.children = null;    } else {      d.children = d._children;      d._children = null;    }    update(d);  }

.node {    cursor: pointer;  }  .node circle {    fill: #fff;    stroke: steelblue;    stroke-width: 3px;  }  .node text {    font: 12px sans-serif;  }  .link {    fill: none;    stroke: #ccc;    stroke-width: 2px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can this:

var nodeenter = node.enter().append("g")     .attr("class", function(d){       if (d.parent == "null"){         return "node parent"//since root parent null       } else         return "node child"//all nodes parent have class     })     .attr("transform", function(d) {       return "translate(" + source.y0 + "," + source.x0 + ")";     })     .on("click", click); 

working code here

hope helps