Set color of nodes based on condition

I want to provide a color for each of the nodes based on its status. For instance, if status is 'completed', color of the node should be green. If it is 'pending' status should be blue and so on.

For this I have created these css classes. The class names exactly match with the status -

.completed {
    fill: green;
}
.pending {
    fill: blue;
}
.dormant {
    fill: purple;
}

When constructing the node, I am trying to apply the class whose name matches with the status

 .style("fill", function (d) { return d3.select(this).classed(d.status, true); })

However, this does not have any impact.

Below is the complete code

                var links = [
            {source: "Start", target: "Dept Approver", type: "approve", staus: "completed"},
                  {source: "Dept Approver", target: "Amount>20", type: "approve", staus: "completed"},
                  {source: "Amount>20", target: "Div Approver", type: "approve", staus: "completed"},
                  {source: "Amount>20", target: "Section Approver", type: "approve", staus: "completed"},
                  {source: "Amount>20", target: "Dept Approver", type: "reject", staus: "completed"},
                  {source: "Div Approver", target: "End", type: "approve", staus: "dormant"},
                  {source: "Section Approver", target: "End", type: "approve", staus: "pending"}
                ];
                
        
                var nodes = {};

                // Compute the distinct nodes from the links.
                links.forEach(function(link) {
                  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
                  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
                });

                var width = 960,
                        height = 500;

                var force = d3.layout.force()
                        .nodes(d3.values(nodes))
                        .links(links)
                        .size([width, height])
                        .linkDistance(80)
                        .charge(-300)
                        .on("tick", function(d) {
                                 path.attr("d", function(d) {
                                         var dx = d.target.x - d.source.x,
                                         dy = d.target.y - d.source.y,
                                         dr = 0;
                                         return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
                                 });
                                 circle.attr("transform", function(d) {
                                        return "translate(" + d.x + "," + d.y + ")";
                                 });
                                 text.attr("transform", function(d) {
                                        return "translate(" + d.x + "," + d.y + ")";
                                 });
                        })
                        .start();

                var svg = d3.select("#chart").append("svg")
                        .attr("width", width)
                        .attr("height", height);

                // Per-type markers, as they don't inherit styles.
                svg.append("defs").selectAll("marker")
                        .data(["approve", "reject"])
                  .enter().append("marker")
                        .attr("id", function(d) { return d; })
                        .attr("viewBox", "0 -5 10 10")
                        .attr("refX", 15)
                        .attr("refY", -1.5)
                        .attr("markerWidth", 8)
                        .attr("markerHeight", 8)
                        .attr("orient", "auto")
                  .append("path")
                        .attr("d", "M0,-5L10,0L0,5");

                var path = svg.append("g").selectAll("path")
                        .data(force.links())
                  .enter().append("path")
                        .attr("class", function(d) { return "link " + d.type; })
                        .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

                var circle = svg.append("g").selectAll("circle")
                        .data(force.nodes())
                  .enter().append("circle")
                        .attr("r", 8)
            .style("fill", function (d) { return d3.select(this).classed(d.status, true); })
                        .call(force.drag);

                var text = svg.append("g").selectAll("text")
                        .data(force.nodes())
                  .enter().append("text")
                        .attr("x", ".40em")
                        .attr("y", 12)
                        .text(function(d) { return d.name; });

        var drag = force.drag()
            .on("dragstart", function(d) {
                                         d3.select(this).classed("fixed", d.fixed = true);
                                 });

 .link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

#licensing {
  fill: green;
}

.link.licensing {
  stroke: green;
}

.link.reject {
  stroke-dasharray: 0,2 1;
    stroke: red;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 11px sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.fixed {
 /* fill: #00B2EE; */
}
.completed {
    fill: green;
}
.pending {
    fill: blue;
}
.dormant {
    fill: purple;
}

<script src="http://ift.tt/1BU5qP2"></script>
<body>
    <div id="chart"></div>
</body>

Can someone please help me in correcting this?