javascript - Change node color depending on status -
i working on below fiddle -
var d3cola = cola.d3adaptor().convergencethreshold(0.1); var width = 960, height = 700; var outer = d3.select("body").append("svg") .attr({ width: width, height: height, "pointer-events": "all" }); outer.append('rect') .attr({ class: 'background', width: "100%", height: "100%" }) .call(d3.behavior.zoom().on("zoom", function(d) { vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); })); var vis = outer .append('g') .attr('transform', 'translate(250,250) scale(0.3)'); outer.append('svg:defs').append('svg:marker') .attr({ id: 'end-arrow', viewbox: '0 -5 10 10', refx: 8, markerwidth: 6, markerheight: 6, orient: 'auto' }) .append('svg:path') .attr({ d: 'm0,-5l10,0l0,5l2,0', 'stroke-width': '0px', fill: '#000'}); // .data(["approve", "reject"]); var nodes = [ { "nodes": "initiate"}, { "nodes": "update comments of requestor"}, { "nodes": "send requestor"}, { "nodes": "update comments of fa rejection"}, { "nodes": "finance approves"}, { "nodes": "update comments of fa"}, { "nodes": "update comments of rm rejection"}, { "nodes": "reporting manager approves"}, { "nodes": "update comments of rm"}, { "nodes": "set permissions on bill rm"}, { "nodes": "set permissions on bill after wf complete"}, { "nodes": "send notification requestor"}, { "nodes": "set permissions on form finance"}, { "nodes": "wf completed permissions on attachments"}, { "nodes": "set permissions on bill requestor rejected rm"}, { "nodes": "move bill tracking no folder-2"}, { "nodes": "set permissions on form requestor rejected rm"}, { "nodes": "set permissions on attachments"}, { "nodes": "set permissions-tracking no. folder"}, { "nodes": "set permissions on bill"}, { "nodes": "move bill tracking no folder-1"}, { "nodes": "set permissions on bill requestor"}, { "nodes": "set permissions on form requestor rejected fa"}, { "nodes": "set permissions on form reporting manager"}, { "nodes": "move bill tracking no folder"}, { "nodes": "wf completed permissions on form"}, { "nodes": "end"} ]; var edges = [ { "source_name": "update comments of requestor", "target_name": "move bill tracking no folder-1", "type": "approve" , "status": "finished", "source": 1, "target": 21}, { "source_name": "send requestor", "target_name": "update comments of requestor", "type": "approve" , "status": "finished", "source": 16, "target": 1}, { "source_name": "update comments of fa rejection", "target_name": "set permissions on form requestor rejected fa", "type": "approve" , "status": "finished", "source": 8, "target": 6}, { "source_name": "finance approves", "target_name": "update comments of fa rejection", "type": "approve" , "status": "finished", "source": 17, "target": 8}, { "source_name": "update comments of fa", "target_name": "wf completed permissions on form", "type": "approve" , "status": "finished", "source": 13, "target": 9}, { "source_name": "finance approves", "target_name": "update comments of fa", "type": "approve" , "status": "finished", "source": 17, "target": 13}, { "source_name": "update comments of rm rejection", "target_name": "set permissions on form requestor rejected rm", "type": "approve" , "status": "finished", "source": 24, "target": 10}, { "source_name": "reporting manager approves", "target_name": "update comments of rm rejection", "type": "approve" , "status": "finished", "source": 19, "target": 24}, { "source_name": "update comments of rm", "target_name": "set permissions on bill", "type": "approve" , "status": "finished", "source": 11, "target": 18}, { "source_name": "reporting manager approves", "target_name": "update comments of rm", "type": "approve" , "status": "finished", "source": 19, "target": 11}, { "source_name": "set permissions on bill rm", "target_name": "reporting manager approves", "type": "approve" , "status": "finished", "source": 12, "target": 19}, { "source_name": "set permissions on bill after wf complete", "target_name": "end", "type": "approve" , "status": "finished", "source": 22, "target": 2}, { "source_name": "send notification requestor", "target_name": "finance approves", "type": "approve" , "status": "finished", "source": 23, "target": 17}, { "source_name": "set permissions on form finance", "target_name": "send notification requestor", "type": "approve" , "status": "finished", "source": 5, "target": 23}, { "source_name": "wf completed permissions on attachments", "target_name": "set permissions on bill after wf complete", "type": "approve" , "status": "finished", "source": 15, "target": 22}, { "source_name": "set permissions on bill requestor rejected rm", "target_name": "move bill tracking no folder-2", "type": "approve" , "status": "finished", "source": 4, "target": 25}, { "source_name": "move bill tracking no folder-2", "target_name": "send requestor", "type": "approve" , "status": "dormant", "source": 25, "target": 16}, { "source_name": "set permissions on form requestor rejected rm", "target_name": "set permissions on bill requestor rejected rm", "type": "approve" , "status": "finished", "source": 10, "target": 4}, { "source_name": "set permissions on attachments", "target_name": "set permissions on form reporting manager", "type": "approve" , "status": "finished", "source": 20, "target": 26}, { "source_name": "set permissions-tracking no. folder", "target_name": "set permissions on attachments", "type": "approve" , "status": "finished", "source": 0, "target": 20}, { "source_name": "initiate", "target_name": "set permissions-tracking no. folder", "type": "approve" , "status": "finished", "source": 14, "target": 0}, { "source_name": "set permissions on bill", "target_name": "move bill tracking no folder", "type": "approve" , "status": "finished", "source": 18, "target": 3}, { "source_name": "move bill tracking no folder-1", "target_name": "set permissions on form reporting manager", "type": "approve" , "status": "finished", "source": 21, "target": 26}, { "source_name": "set permissions on bill requestor", "target_name": "send requestor", "type": "approve" , "status": "dormant", "source": 7, "target": 16}, { "source_name": "set permissions on form requestor rejected fa", "target_name": "set permissions on bill requestor", "type": "approve" , "status": "dormant", "source": 6, "target": 7}, { "source_name": "set permissions on form reporting manager", "target_name": "set permissions on bill rm", "type": "approve" , "status": "pending", "source": 26, "target": 12}, { "source_name": "move bill tracking no folder", "target_name": "set permissions on form finance", "type": "approve" , "status": "pending", "source": 3, "target": 5}, { "source_name": "wf completed permissions on form", "target_name": "wf completed permissions on attachments", "type": "approve" , "status": "pending", "source": 9, "target": 15} ]; d3cola .avoidoverlaps(true) .convergencethreshold(1e-3) .flowlayout('x', 150) .size([width, height]) .nodes(nodes) .links(edges) .jaccardlinklengths(150); var link = vis.selectall(".link") .data(edges) .enter().append("path") // .attr("class", "link") .attr("class", function(d) { return "link " + d.type; }); var margin = 10, pad = 12; var node = vis.selectall(".node") .data(nodes) .enter().append("rect") .classed("node", true) .attr({ rx: 5, ry: 5 }) .call(d3cola.drag); var label = vis.selectall(".label") .data(nodes) .enter().append("text") .attr("class", "label") .text(function (d) { return d.nodes; }) .call(d3cola.drag) .each(function (d) { var b = this.getbbox(); var = 2 * margin + 2 * pad; d.width = b.width + extra; d.height = b.height + extra; }); var linefunction = d3.svg.line() .x(function (d) { return d.x; }) .y(function (d) { return d.y; }) .interpolate("linear"); var routeedges = function () { d3cola.prepareedgerouting(); link.attr("d", function (d) { return linefunction(d3cola.routeedge(d)); }); if (isie()) link.each(function (d) { this.parentnode.insertbefore(this, this) }); } d3cola.start(50, 100, 200).on("tick", function () { node.each(function (d) { d.innerbounds = d.bounds.inflate(-margin); }) .attr("x", function (d) { return d.innerbounds.x; }) .attr("y", function (d) { return d.innerbounds.y; }) .attr("width", function (d) { return d.innerbounds.width(); }) .attr("height", function (d) { return d.innerbounds.height(); }); link.attr("d", function (d) { cola.vpsc.makeedgebetween(d, d.source.innerbounds, d.target.innerbounds, 5); var linedata = [{ x: d.sourceintersection.x, y: d.sourceintersection.y }, { x: d.arrowstart.x, y: d.arrowstart.y }]; return linefunction(linedata); }); if (isie()) link.each(function (d) { this.parentnode.insertbefore(this, this) }); label .attr("x", function (d) { return d.x }) .attr("y", function (d) { return d.y + (margin + pad) / 2 }); }).on("end", routeedges); function isie() { return ((navigator.appname == 'microsoft internet explorer') || ((navigator.appname == 'netscape') && (new regexp("trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.useragent) != null))); }.background { stroke: white; stroke-width: 1px; fill: white; } .node { stroke: black; stroke-width: 1.5px; cursor: move; fill: lightcoral; } .link { fill: none; stroke: #000; stroke-width: 3px; opacity: 0.7; marker-end: url(#end-arrow); } .label { fill: black; font-family: verdana; font-size: 25px; text-anchor: middle; cursor: move; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>ei works fine. need change color of target node (rectangle) depending on 'status' attribute.
in order achieve this, create below css classes -
.finished { fill: green; } .pending { fill: blue; } .dormant { fill: purple; } and changed
.classed("node", true) to
.style("fill", function (d) { return d3.select(this).classed(edges[d.status], true)}) this resulted in nodes being colored black.
can please me identify problem.
new fiddle is
var d3cola = cola.d3adaptor().convergencethreshold(0.1); var width = 960, height = 700; var outer = d3.select("body").append("svg") .attr({ width: width, height: height, "pointer-events": "all" }); outer.append('rect') .attr({ class: 'background', width: "100%", height: "100%" }) .call(d3.behavior.zoom().on("zoom", function(d) { vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); })); var vis = outer .append('g') .attr('transform', 'translate(250,250) scale(0.3)'); outer.append('svg:defs').append('svg:marker') .attr({ id: 'end-arrow', viewbox: '0 -5 10 10', refx: 8, markerwidth: 6, markerheight: 6, orient: 'auto' }) .append('svg:path') .attr({ d: 'm0,-5l10,0l0,5l2,0', 'stroke-width': '0px', fill: '#000'}); var nodes = [ { "nodes": "initiate"}, { "nodes": "update comments of requestor"}, { "nodes": "send requestor"}, { "nodes": "update comments of fa rejection"}, { "nodes": "finance approves"}, { "nodes": "update comments of fa"}, { "nodes": "update comments of rm rejection"}, { "nodes": "reporting manager approves"}, { "nodes": "update comments of rm"}, { "nodes": "set permissions on bill rm"}, { "nodes": "set permissions on bill after wf complete"}, { "nodes": "send notification requestor"}, { "nodes": "set permissions on form finance"}, { "nodes": "wf completed permissions on attachments"}, { "nodes": "set permissions on bill requestor rejected rm"}, { "nodes": "move bill tracking no folder-2"}, { "nodes": "set permissions on form requestor rejected rm"}, { "nodes": "set permissions on attachments"}, { "nodes": "set permissions-tracking no. folder"}, { "nodes": "set permissions on bill"}, { "nodes": "move bill tracking no folder-1"}, { "nodes": "set permissions on bill requestor"}, { "nodes": "set permissions on form requestor rejected fa"}, { "nodes": "set permissions on form reporting manager"}, { "nodes": "move bill tracking no folder"}, { "nodes": "wf completed permissions on form"}, { "nodes": "end"} ]; var edges = [ { "source_name": "update comments of requestor", "target_name": "move bill tracking no folder-1", "type": "approve" , "status": "finished", "source": 1, "target": 21}, { "source_name": "send requestor", "target_name": "update comments of requestor", "type": "approve" , "status": "finished", "source": 16, "target": 1}, { "source_name": "update comments of fa rejection", "target_name": "set permissions on form requestor rejected fa", "type": "approve" , "status": "finished", "source": 8, "target": 6}, { "source_name": "finance approves", "target_name": "update comments of fa rejection", "type": "approve" , "status": "finished", "source": 17, "target": 8}, { "source_name": "update comments of fa", "target_name": "wf completed permissions on form", "type": "approve" , "status": "finished", "source": 13, "target": 9}, { "source_name": "finance approves", "target_name": "update comments of fa", "type": "approve" , "status": "finished", "source": 17, "target": 13}, { "source_name": "update comments of rm rejection", "target_name": "set permissions on form requestor rejected rm", "type": "approve" , "status": "finished", "source": 24, "target": 10}, { "source_name": "reporting manager approves", "target_name": "update comments of rm rejection", "type": "approve" , "status": "finished", "source": 19, "target": 24}, { "source_name": "update comments of rm", "target_name": "set permissions on bill", "type": "approve" , "status": "finished", "source": 11, "target": 18}, { "source_name": "reporting manager approves", "target_name": "update comments of rm", "type": "approve" , "status": "finished", "source": 19, "target": 11}, { "source_name": "set permissions on bill rm", "target_name": "reporting manager approves", "type": "approve" , "status": "finished", "source": 12, "target": 19}, { "source_name": "set permissions on bill after wf complete", "target_name": "end", "type": "approve" , "status": "finished", "source": 22, "target": 2}, { "source_name": "send notification requestor", "target_name": "finance approves", "type": "approve" , "status": "finished", "source": 23, "target": 17}, { "source_name": "set permissions on form finance", "target_name": "send notification requestor", "type": "approve" , "status": "finished", "source": 5, "target": 23}, { "source_name": "wf completed permissions on attachments", "target_name": "set permissions on bill after wf complete", "type": "approve" , "status": "finished", "source": 15, "target": 22}, { "source_name": "set permissions on bill requestor rejected rm", "target_name": "move bill tracking no folder-2", "type": "approve" , "status": "finished", "source": 4, "target": 25}, { "source_name": "move bill tracking no folder-2", "target_name": "send requestor", "type": "approve" , "status": "dormant", "source": 25, "target": 16}, { "source_name": "set permissions on form requestor rejected rm", "target_name": "set permissions on bill requestor rejected rm", "type": "approve" , "status": "finished", "source": 10, "target": 4}, { "source_name": "set permissions on attachments", "target_name": "set permissions on form reporting manager", "type": "approve" , "status": "finished", "source": 20, "target": 26}, { "source_name": "set permissions-tracking no. folder", "target_name": "set permissions on attachments", "type": "approve" , "status": "finished", "source": 0, "target": 20}, { "source_name": "initiate", "target_name": "set permissions-tracking no. folder", "type": "approve" , "status": "finished", "source": 14, "target": 0}, { "source_name": "set permissions on bill", "target_name": "move bill tracking no folder", "type": "approve" , "status": "finished", "source": 18, "target": 3}, { "source_name": "move bill tracking no folder-1", "target_name": "set permissions on form reporting manager", "type": "approve" , "status": "finished", "source": 21, "target": 26}, { "source_name": "set permissions on bill requestor", "target_name": "send requestor", "type": "approve" , "status": "dormant", "source": 7, "target": 16}, { "source_name": "set permissions on form requestor rejected fa", "target_name": "set permissions on bill requestor", "type": "approve" , "status": "dormant", "source": 6, "target": 7}, { "source_name": "set permissions on form reporting manager", "target_name": "set permissions on bill rm", "type": "approve" , "status": "pending", "source": 26, "target": 12}, { "source_name": "move bill tracking no folder", "target_name": "set permissions on form finance", "type": "approve" , "status": "pending", "source": 3, "target": 5}, { "source_name": "wf completed permissions on form", "target_name": "wf completed permissions on attachments", "type": "approve" , "status": "pending", "source": 9, "target": 15} ]; d3cola .avoidoverlaps(true) .convergencethreshold(1e-3) .flowlayout('x', 150) .size([width, height]) .nodes(nodes) .links(edges) .jaccardlinklengths(150); var link = vis.selectall(".link") .data(edges) .enter().append("path") .attr("class", "link"); var margin = 10, pad = 12; var node = vis.selectall(".node") .data(nodes) .enter().append("rect") // .classed("node", true) .style("fill", function (d) { return d3.select(this).classed(edges[d.status], true)}) .attr({ rx: 5, ry: 5 }) .call(d3cola.drag); var label = vis.selectall(".label") .data(nodes) .enter().append("text") .attr("class", "label") .text(function (d) { return d.nodes; }) .call(d3cola.drag) .each(function (d) { var b = this.getbbox(); var = 2 * margin + 2 * pad; d.width = b.width + extra; d.height = b.height + extra; }); var linefunction = d3.svg.line() .x(function (d) { return d.x; }) .y(function (d) { return d.y; }) .interpolate("linear"); var routeedges = function () { d3cola.prepareedgerouting(); link.attr("d", function (d) { return linefunction(d3cola.routeedge(d)); }); if (isie()) link.each(function (d) { this.parentnode.insertbefore(this, this) }); } d3cola.start(50, 100, 200).on("tick", function () { node.each(function (d) { d.innerbounds = d.bounds.inflate(-margin); }) .attr("x", function (d) { return d.innerbounds.x; }) .attr("y", function (d) { return d.innerbounds.y; }) .attr("width", function (d) { return d.innerbounds.width(); }) .attr("height", function (d) { return d.innerbounds.height(); }); link.attr("d", function (d) { cola.vpsc.makeedgebetween(d, d.source.innerbounds, d.target.innerbounds, 5); var linedata = [{ x: d.sourceintersection.x, y: d.sourceintersection.y }, { x: d.arrowstart.x, y: d.arrowstart.y }]; return linefunction(linedata); }); if (isie()) link.each(function (d) { this.parentnode.insertbefore(this, this) }); label .attr("x", function (d) { return d.x }) .attr("y", function (d) { return d.y + (margin + pad) / 2 }); }).on("end", routeedges); function isie() { return ((navigator.appname == 'microsoft internet explorer') || ((navigator.appname == 'netscape') && (new regexp("trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.useragent) != null))); }.background { stroke: white; stroke-width: 1px; fill: white; } .node { stroke: black; stroke-width: 1.5px; cursor: move; fill: lightcoral; } .link { fill: none; stroke: #000; stroke-width: 3px; opacity: 0.7; marker-end: url(#end-arrow); } .label { fill: black; font-family: verdana; font-size: 25px; text-anchor: middle; cursor: move; } .finished { fill: green; } .pending { fill: blue; } .dormant { fill: purple; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
if can, change data structure status part of nodes array. makes things bit easier. if can't you'll have iterate edges array find match nodes array:
var node = vis.selectall(".node") .data(nodes) .enter().append("rect") .attr('class',function(d){ //<-- don't need classed, attr fine var n = edges.length; (var = 0; < n; i++){ if (edges[i].source_name === d.nodes){ return edges[i].status; //<-- found , return status } } }) .attr({ rx: 5, ry: 5 }) .call(d3cola.drag); updated example.
Comments
Post a Comment