D3 と dagre-d3 を使用して次の図を作成しました。
var width = 960, height = 700;
// REMOVE OLD SVG
d3.select("#wkfsvg").remove();
// ADD NEW SVG
var graphArea = d3.select("body").append("svg")
.attr({ width: width, height: height, "pointer-events": "all" })
.attr("id","wkfsvg");
var g = new dagreD3.graphlib.Graph().setGraph({});
d3.select("svg").
insert("g", "g");
var nodesJson = [
{
"nodes": "Initiate",
"status": "startend",
"creation_date": "",
"performer_name": "",
"execution_type": "Automatic"
},
{
"nodes": "Find the Next Approver",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Automatic"
},
{
"nodes": "Check for Manager",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Automatic"
},
{
"nodes": "Set Status & ACL for IT Project Manager",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Automatic"
},
{
"nodes": "Set Status & ACL for IT Sign Off Approvers",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "IT Project Manager Approves",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"id": "Finance Approver",
"nodes": "Finance Approver",
"status": "dormant",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Send Email for Completion",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Send to Requestor",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Send Email to Requestor",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"id": "Set ACL on Form for Requestor",
"nodes": "Set ACL on Form for Requestor",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Set Completion ACL on Form",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"id": "Set Completion ACL on PO",
"nodes": "Set Completion ACL on PO",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Set Completion ACL on Attachments",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Set ACL on Attachment",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Update Comments of PM Rejection",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Update Comments of FA Rejection",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Update Comments of PM",
"status": "completed",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Update Comments of FA",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "Update Comments of Requestor",
"status": "future",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
},
{
"nodes": "End",
"status": "startend",
"creation_date": "",
"performer_name": "",
"execution_type": "Manual"
}
];
// Automatically label each of the nodes
nodesJson.forEach(function(node) {
if(node.status == "future") {
if(node.execution_type == "Manual") {
g.setNode(node.nodes, { labelType: "html", label: node.nodes+' <tspan dx="0" dy="-10">\uf007</tspan>', class: "future" });
} else {
g.setNode(node.nodes, { label: node.nodes, class: "future" });
}
} else if(node.status == "completed") {
if(node.execution_type == "Manual") {
g.setNode(node.nodes, { labelType: "html", label: node.nodes+' <tspan dx="0" dy="-10">\uf007</tspan>', class: "completed" });
} else {
g.setNode(node.nodes, { label: node.nodes, class: "completed" });
}
} else if(node.status == "dormant") {
if(node.execution_type == "Manual") {
g.setNode(node.nodes, { labelType: "html", label: node.nodes, class: "dormant" });
} else {
g.setNode(node.nodes, { label: node.nodes, class: "dormant" });
}
} else if(node.status == "startend") {
g.setNode(node.nodes, { label: node.nodes, class: "startend" });
} else {
g.setNode(node.nodes, { label: node.nodes });
}
});
var edgesJson = [
{
"type": "approve",
"source": "Find the Next Approver",
"target": "Check for Manager"
},
{
"type": "approve",
"source": "Check for Manager",
"target": "Set Status & ACL for IT Sign Off Approvers"
},
{
"type": "approve",
"source": "Check for Manager",
"target": "Set Status & ACL for IT Project Manager"
},
{
"type": "approve",
"source": "Set Status & ACL for IT Project Manager",
"target": "IT Project Manager Approves"
},
{
"type": "approve",
"source": "Set Status & ACL for IT Sign Off Approvers",
"target": "Finance Approver"
},
{
"type": "approve",
"source": "Set ACL on Form for Requestor",
"target": "Send to Requestor"
},
{
"type": "approve",
"source": "Set Completion ACL on Form",
"target": "Set Completion ACL on PO"
},
{
"type": "approve",
"source": "IT Project Manager Approves",
"target": "Send Email to Requestor"
},
{
"type": "approve",
"source": "Set Completion ACL on PO",
"target": "Set Completion ACL on Attachments"
},
{
"type": "approve",
"source": "Set Completion ACL on Attachments",
"target": "Send Email for Completion"
},
{
"type": "approve",
"source": "Initiate",
"target": "Set ACL on Attachment"
},
{
"type": "approve",
"source": "Set ACL on Attachment",
"target": "Find the Next Approver"
},
{
"type": "approve",
"source": "Update Comments of PM Rejection",
"target": "Set ACL on Form for Requestor"
},
{
"type": "reject",
"source": "IT Project Manager Approves",
"target": "Update Comments of PM Rejection"
},
{
"type": "approve",
"source": "Update Comments of FA Rejection",
"target": "Set ACL on Form for Requestor"
},
{
"type": "approve",
"source": "Send Email to Requestor",
"target": "Update Comments of PM"
},
{
"type": "approve",
"source": "Update Comments of PM",
"target": "Set Status & ACL for IT Sign Off Approvers"
},
{
"type": "approve",
"source": "Finance Approver",
"target": "Update Comments of FA"
},
{
"type": "approve",
"source": "Update Comments of FA",
"target": "Set Completion ACL on Form"
},
{
"type": "reject",
"source": "Finance Approver",
"target": "Update Comments of FA Rejection"
},
{
"type": "approve",
"source": "Send to Requestor",
"target": "Update Comments of Requestor"
},
{
"type": "approve",
"source": "Update Comments of Requestor",
"target": "Check for Manager"
},
{
"type": "approve",
"source": "Send Email for Completion",
"target": "End"
}
];
edgesJson.forEach(function(edge) {
if(edge.type == "approve") {
g.setEdge(edge.source, edge.target, { label: "" });
}
// Make the edge of rejected paths red and dashed
if(edge.type == "reject") {
g.setEdge(edge.source, edge.target, {
label: "", class: "rejectEdgePath"
});
}
});
var svg = d3.select("svg"),
inner = svg.select("g");
// Set the rankdir
//g.graph().rankdir = "LR";
g.graph().nodesep = 60;
// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
inner.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")");
});
svg.call(zoom);
// Create the renderer
var render = new dagreD3.render();
// Run the renderer. This is what draws the final graph.
render(inner, g);
// Center the graph
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);
var selectedNode = inner.selectAll("g.node");
selectedNode.on('click', function (d) {
console.log('clicked '+d);
});.node rect {
stroke: #333;
fill: #fff;
}
.edgePath path {
stroke: #333;
fill: #333;
stroke-width: 1.5px;
}
.rejectEdgePath path {
stroke: red;
fill: red;
stroke-width: 1.5px;
stroke-dasharray: 5, 5;
}
g.dormant > rect {
fill: #CC66FF;
}
g.completed > rect {
fill: #66FF99;
}
g.future > rect {
fill: #99CCFF;
}
g.acquired > rect {
fill: #EBBFFF;
}
g.paused > rect {
fill: #FF0000;
}
g.startend > rect {
fill: #CC6666;
}
foreignobject {
fill: black;
font-family: FontAwesome;
font-size: 15px;
text-anchor: middle;
// cursor: move;
}<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>ノードをクリックすると、クリックされたノードの詳細を見つける必要があります。だから私は次のコードを書いた -
var selectedNode = inner.selectAll("g.node");
selectedNode.on('click', function (d) {
console.log('clicked '+d);
});
ただし、これはノード名を提供するだけです。「ステータス」、「作成日」、「実行者名」など、nodesJsonから他の属性も出力したいと思います。
誰かがこれについてどうすればよいかアドバイスしてもらえますか?
ありがとうございました