根据状态更改节点颜色

Question

我正在研究下面的小提琴-

 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 to 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 for RM"}, { "nodes": "Set Permissions on Bill after WF Complete"}, { "nodes": "Send Notification to Requestor"}, { "nodes": "Set Permissions on form for Finance"}, { "nodes": "WF Completed Permissions on Attachments"}, { "nodes": "Set Permissions on Bill for Requestor Rejected by RM"}, { "nodes": "Move Bill To Tracking No Folder-2"}, { "nodes": "Set Permissions on Form for Requestor Rejected by RM"}, { "nodes": "Set Permissions on Attachments"}, { "nodes": "Set Permissions-Tracking No. Folder"}, { "nodes": "Set Permissions on Bill"}, { "nodes": "Move Bill To Tracking No Folder-1"}, { "nodes": "Set Permissions on Bill for Requestor"}, { "nodes": "Set Permissions on Form for Requestor Rejected by FA"}, { "nodes": "Set Permissions on form for Reporting Manager"}, { "nodes": "Move Bill To Tracking No Folder"}, { "nodes": "WF Completed Permissions on Form"}, { "nodes": "End"} ]; var edges = [ { "source_name": "Update Comments of Requestor", "target_name": "Move Bill To Tracking No Folder-1", "type": "approve" , "status": "finished", "source": 1, "target": 21}, { "source_name": "Send to 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 for Requestor Rejected by 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 for Requestor Rejected by 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 for 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 to Requestor", "target_name": "Finance Approves", "type": "approve" , "status": "finished", "source": 23, "target": 17}, { "source_name": "Set Permissions on form for Finance", "target_name": "Send Notification to 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 for Requestor Rejected by RM", "target_name": "Move Bill To Tracking No Folder-2", "type": "approve" , "status": "finished", "source": 4, "target": 25}, { "source_name": "Move Bill To Tracking No Folder-2", "target_name": "Send to Requestor", "type": "approve" , "status": "dormant", "source": 25, "target": 16}, { "source_name": "Set Permissions on Form for Requestor Rejected by RM", "target_name": "Set Permissions on Bill for Requestor Rejected by RM", "type": "approve" , "status": "finished", "source": 10, "target": 4}, { "source_name": "Set Permissions on Attachments", "target_name": "Set Permissions on form for 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 To Tracking No Folder", "type": "approve" , "status": "finished", "source": 18, "target": 3}, { "source_name": "Move Bill To Tracking No Folder-1", "target_name": "Set Permissions on form for Reporting Manager", "type": "approve" , "status": "finished", "source": 21, "target": 26}, { "source_name": "Set Permissions on Bill for Requestor", "target_name": "Send to Requestor", "type": "approve" , "status": "dormant", "source": 7, "target": 16}, { "source_name": "Set Permissions on Form for Requestor Rejected by FA", "target_name": "Set Permissions on Bill for Requestor", "type": "approve" , "status": "dormant", "source": 6, "target": 7}, { "source_name": "Set Permissions on form for Reporting Manager", "target_name": "Set Permissions on Bill for RM", "type": "approve" , "status": "pending", "source": 26, "target": 12}, { "source_name": "Move Bill To Tracking No Folder", "target_name": "Set Permissions on form for 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 extra = 2 * margin + 2 * pad; d.width = b.width + extra; d.height = b.height + extra; }); var lineFunction = d3.svg.line() .x(function (d) { return dx; }) .y(function (d) { return dy; }) .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 dx }) .attr("y", function (d) { return dy + (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>E 

我很好 现在，我需要根据“状态”属性更改目标节点的颜色（矩形）。

为了实现这一点，我创建了以下CSS类-

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

并改变了

.classed("node", true)

至

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

这导致所有节点都被染成黑色。

有人可以帮我找出问题所在吗？

新的小提琴是

 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 to 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 for RM"}, { "nodes": "Set Permissions on Bill after WF Complete"}, { "nodes": "Send Notification to Requestor"}, { "nodes": "Set Permissions on form for Finance"}, { "nodes": "WF Completed Permissions on Attachments"}, { "nodes": "Set Permissions on Bill for Requestor Rejected by RM"}, { "nodes": "Move Bill To Tracking No Folder-2"}, { "nodes": "Set Permissions on Form for Requestor Rejected by RM"}, { "nodes": "Set Permissions on Attachments"}, { "nodes": "Set Permissions-Tracking No. Folder"}, { "nodes": "Set Permissions on Bill"}, { "nodes": "Move Bill To Tracking No Folder-1"}, { "nodes": "Set Permissions on Bill for Requestor"}, { "nodes": "Set Permissions on Form for Requestor Rejected by FA"}, { "nodes": "Set Permissions on form for Reporting Manager"}, { "nodes": "Move Bill To Tracking No Folder"}, { "nodes": "WF Completed Permissions on Form"}, { "nodes": "End"} ]; var edges = [ { "source_name": "Update Comments of Requestor", "target_name": "Move Bill To Tracking No Folder-1", "type": "approve" , "status": "finished", "source": 1, "target": 21}, { "source_name": "Send to 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 for Requestor Rejected by 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 for Requestor Rejected by 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 for 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 to Requestor", "target_name": "Finance Approves", "type": "approve" , "status": "finished", "source": 23, "target": 17}, { "source_name": "Set Permissions on form for Finance", "target_name": "Send Notification to 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 for Requestor Rejected by RM", "target_name": "Move Bill To Tracking No Folder-2", "type": "approve" , "status": "finished", "source": 4, "target": 25}, { "source_name": "Move Bill To Tracking No Folder-2", "target_name": "Send to Requestor", "type": "approve" , "status": "dormant", "source": 25, "target": 16}, { "source_name": "Set Permissions on Form for Requestor Rejected by RM", "target_name": "Set Permissions on Bill for Requestor Rejected by RM", "type": "approve" , "status": "finished", "source": 10, "target": 4}, { "source_name": "Set Permissions on Attachments", "target_name": "Set Permissions on form for 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 To Tracking No Folder", "type": "approve" , "status": "finished", "source": 18, "target": 3}, { "source_name": "Move Bill To Tracking No Folder-1", "target_name": "Set Permissions on form for Reporting Manager", "type": "approve" , "status": "finished", "source": 21, "target": 26}, { "source_name": "Set Permissions on Bill for Requestor", "target_name": "Send to Requestor", "type": "approve" , "status": "dormant", "source": 7, "target": 16}, { "source_name": "Set Permissions on Form for Requestor Rejected by FA", "target_name": "Set Permissions on Bill for Requestor", "type": "approve" , "status": "dormant", "source": 6, "target": 7}, { "source_name": "Set Permissions on form for Reporting Manager", "target_name": "Set Permissions on Bill for RM", "type": "approve" , "status": "pending", "source": 26, "target": 12}, { "source_name": "Move Bill To Tracking No Folder", "target_name": "Set Permissions on form for 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 extra = 2 * margin + 2 * pad; d.width = b.width + extra; d.height = b.height + extra; }); var lineFunction = d3.svg.line() .x(function (d) { return dx; }) .y(function (d) { return dy; }) .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 dx }) .attr("y", function (d) { return dy + (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> 

Answer 1

如果可以，请更改数据结构，以使status成为节点数组的一部分。 这使事情变得容易一些。 如果不能，则必须迭代edges数组以找到与nodes数组的匹配项：

var node = vis.selectAll(".node")
  .data(nodes)
  .enter().append("rect")
  .attr('class',function(d){ //<-- don't need classed, attr is fine
    var N = edges.length;
    for (var i = 0; i < N; i++){
      if (edges[i].source_name === d.nodes){
        return edges[i].status; //<-- found it and return status
      }
    }
   })
  .attr({ rx: 5, ry: 5 })
  .call(d3cola.drag);

更新示例 。