title: D3 collapsible Tree different node colors
body: <p>I've got a collapsible tree in d3.js. My goal is to color the nodes by the "type"-attribute. A node with type = "str" should be filled red for example, while the ones with type = "elem" should be colored green. I just can't get it to work. Can someone help me please.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;title&gt;Tree Collapsible Example&lt;/title&gt;
  
  &lt;style&gt;
  
      .node {
          cursor: pointer;
      }
  
      .node circle {
          fill: #fff;
          stroke: steelblue;
          stroke-width: 2px;
      }
  
      .node text {
          font: 10px sans-serif;
      }
  
      .link {
          fill: none;
          stroke: #ccc;
          stroke-width: 1.5px;
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- load the d3.js library --&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  // ************** Generate the tree diagram  *****************
  var margin = {top: 20, right: 120, bottom: 20, left: 120},
          width = 1000 - margin.right - margin.left,
          height = 500 - margin.top - margin.bottom;
  
  var i = 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 + ")");
  
  // load the external data
  d3.json("dendrogram02.json", function(error, treeData) {
      root = treeData[0];
      root.x0 = height / 2;
      root.y0 = 0;
      update(root);
  });
  
  d3.select(self.frameElement).style("height", "500px");
  
  function update(source) {
  
      // Compute the new tree layout.
      var nodes = tree.nodes(root).reverse(),
              links = tree.links(nodes);
  
      // Normalize for fixed-depth.
      nodes.forEach(function(d) { d.y = d.depth * 80; });
  
      // Update the nodes…
      var node = svg.selectAll("g.node")
              .data(nodes, function(d) { return d.id || (d.id = ++i); });
  
      // Enter any new nodes at the 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"; });
  
      nodeEnter.append("text")
              .attr("x", function(d) { return d.children || d._children ? 20 : 13; })
              .attr("dy", function(d) { return d.children || d._children ? "-.8em" : ".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 to their new position.
      var nodeUpdate = node.transition()
              .duration(duration)
              .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
  
      nodeUpdate.select("circle")
              .attr("r", 4)
              .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
  
      nodeUpdate.select("text")
              .style("fill-opacity", 1);
  
      // Transition exiting nodes to the 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 the links…
      var link = svg.selectAll("path.link")
              .data(links, function(d) { return d.target.id; });
  
      // Enter any new links at the 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 to their new position.
      link.transition()
              .duration(duration)
              .attr("d", diagonal);
  
      // Transition exiting nodes to the 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 the old positions for 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);
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the corresponding .json:</p>
  
  <pre><code>[
    {
      "name": "1",
      "type": "sources",
      "children": [
        {
          "name": "0",
          "type": "dfasdl",
          "children": [
            {
              "name": "companies",
              "type": "seq",
              "children": [
                {
                  "name": "row",
                  "type": "elem",
                  "children": [
                    {
                      "name": "id",
                      "type": "str"
                    },
                    {
                      "name": "companyName",
                      "type": "str"
                    },
                    {
                      "name": "industry",
                      "type": "str"
                    },
                    {
                      "name": "telephoneCompany",
                      "type": "str"
                    },
                    {
                      "name": "date_entered",
                      "type": "datetime"
                    }
                  ]
                }
              ]
            },
            {
              "name": "contacts",
              "type": "seq",
              "children": [
                {
                  "name": "row",
                  "type": "elem",
                  "children": [
                    {
                      "name": "id",
                      "type": "str"
                    },
                    {
                      "name": "title",
                      "type": "str"
                    },
                    {
                      "name": "contactFirstName",
                      "type": "str"
                    },
                    {
                      "name": "contactLastName",
                      "type": "str"
                    },
                    {
                      "name": "telephoneUS",
                      "type": "str"
                    }
                  ]
                }
              ]
            },
            {
              "name": "employees",
              "type": "seq",
              "children": [
                {
                  "name": "row",
                  "type": "elem",
                  "children": [
                    {
                      "name": "id",
                      "type": "str"
                    },
                    {
                      "name": "position",
                      "type": "str"
                    },
                    {
                      "name": "employeeFirstName",
                      "type": "str"
                    },
                    {
                      "name": "employeeLastName",
                      "type": "str"
                    },
                    {
                      "name": "telephoneUS",
                      "type": "str"
                    }
                  ]
                }
              ]
            },
            {
              "name": "vendors",
              "type": "seq",
              "children": [
                {
                  "name": "row",
                  "type": "elem",
                  "children": [
                    {
                      "name": "id",
                      "type": "str"
                    },
                    {
                      "name": "type",
                      "type": "str"
                    },
                    {
                      "name": "vendorFirstName",
                      "type": "str"
                    },
                    {
                      "name": "vendorLastName",
                      "type": "str"
                    },
                    {
                      "name": "telephone",
                      "type": "str"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
  </code></pre>