我正在研究下面的 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 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 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>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)})
这导致所有节点都被涂成黑色。
有人可以帮我找出问题所在吗？
新 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'});
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 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>最佳答案
如果可以，请更改数据结构，使 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);
已更新example .
关于javascript - 根据状态更改节点颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30561265/