根据条件设置节点颜色
[英]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. 为此，我创建了这些CSS类。 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(" + dx + "," + dy + ")"; }); text.attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); }) .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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body> <div id="chart"></div> </body>
Can someone please help me in correcting this? 有人可以帮我纠正这个问题吗？
1 个解决方案
解决方案1
1 已采纳 2015-05-06 16:55:30
There are a few issues with your code. 您的代码存在一些问题。
- You misspelled
"status"as"staus"in thelinksin your example.你拼错了"status"为"staus"的links在你的榜样。 You're trying to color nodes based on their status, but because you're providing the node data from
force.nodes(), you're losing thestatus.您正在尝试根据节点的状态为节点着色，但是由于要从force.nodes()提供节点数据，force.nodes()会丢失status。 (Furthermore, eachlinkhas astatus, rather than anode.) One way to fix this would be to store the status of each node separately:（此外，每个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 });and then use that to color the nodes:
然后使用它为节点着色： .style("fill", function (d) { return d3.select(this).classed(nodeToStatus[d.name], true); })
This gives the output below (complete Fiddle here ). 这给出下面的输出（ 在此处完成Fiddle）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.