根據條件設置節點的顏色

Question

我想根據其狀態爲每個節點提供顏色。例如，如果狀態爲「已完成」，則節點的顏色應爲綠色。如果它是'正在等待'狀態應該是藍色等等。

爲此我創建了這些css類。類名完全匹配與狀態 -

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

當構造節點，我想申請，其名稱與狀態

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

匹配類

但是，這沒有任何影響。

下面是完整的代碼

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

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

 
\t \t var width = 960, 
 
\t \t \t height = 500; 
 

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

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

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

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

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

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

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

.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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<body> 
 
    <div id="chart"></div> 
 
</body>

能有人幫我糾正嗎？

Answer 1

您的代碼有幾個問題。

1. 您在links在你的例子拼錯"status"爲"staus"。

2. 您試圖根據節點的狀態對節點着色，但由於您提供的節點數據來自force.nodes()，因此您將丟失status。 （此外，每個link具有status，而不是一個node。），以解決這個問題。將分別存儲每個節點的狀態的一種方法：

   var nodes = {}, 
   nodeToStatus = {}; 
   
   // Compute the distinct nodes and node status 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}); 
       nodeToStatus[link.source.name] = link.status; <---- unclear which status 
       nodeToStatus[link.target.name] = link.status; <---- to use per node 
   }); 
   

   ，然後使用該着色的節點：

   .style("fill", function (d) { 
       return d3.select(this).classed(nodeToStatus[d.name], true); 
   }) 
   

這給出了下面的輸出（完整的小提琴here）。