0
У меня есть код D3, который создает прямоугольники, вставляет в него некоторый текст и соединяет каждый узел на основе некоторой логики. . Теперь, для каждого узла, я хочу, чтобы отобразить значок, если execution_type этого узла является «Руководство» Символ должен быть похож на этот пример: http://output.jsbin.com/eFAZABe/6Иконка не отображается правильно
Посмотрев на этом примере, я проверил Font Awesome и обнаружил, что . "фа-пользователь" предоставляет такую иконку Ищу
Итак, я придумал следующий код:
var d3cola = cola.d3adaptor().convergenceThreshold(0.1);
var width = 960, height = 700;
// REMOVE OLD SVG
\t \t d3.select("#wkfsvg").remove();
d3.select("#stats").remove();
\t \t // ADD NEW SVG
\t \t var outer = d3.select("body").append("svg")
\t \t \t .attr({ width: width, height: height, "pointer-events": "all" })
\t \t \t .attr("id","wkfsvg");
\t \t \t
d3.select("body")
.insert("div", "#wkfsvg")
.attr("id", "stats")
.attr("class", "tooltip");
// document.getElementById('wkfsvg').parentNode.style.overflow = 'scroll'
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')
\t \t \t .attr({
id: 'end-arrow-approve',
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: 'black'});
\t \t
outer.append('svg:defs').append('svg:marker')
.attr({
id: 'end-arrow-reject',
viewBox: '0 -5 10 10',
refX: 8,
markerWidth: 10,
markerHeight:10,
orient: 'auto'
})
.append('svg:path')
.attr({
d: 'M0,-5L10,0L0,5L2,0',
'stroke-width': '0px',
fill: 'red'
}) \t \t
var nodes = [
{
"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"
},
{
"nodes": "Finance Approver",
"status": "pending",
"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"
},
{
"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"
},
{
"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"
}
];
\t
var edges = [
{
"source": 1,
"target": 2,
"type": "approve",
"source_name": "Find the Next Approver",
"target_name": "Check for Manager"
},
{
"source": 2,
"target": 4,
"type": "approve",
"source_name": "Check for Manager",
"target_name": "Set Status & ACL for IT Sign Off Approvers"
},
{
"source": 2,
"target": 3,
"type": "approve",
"source_name": "Check for Manager",
"target_name": "Set Status & ACL for IT Project Manager"
},
{
"source": 3,
"target": 5,
"type": "approve",
"source_name": "Set Status & ACL for IT Project Manager",
"target_name": "IT Project Manager Approves"
},
{
"source": 4,
"target": 6,
"type": "approve",
"source_name": "Set Status & ACL for IT Sign Off Approvers",
"target_name": "Finance Approver"
},
{
"source": 10,
"target": 8,
"type": "approve",
"source_name": "Set ACL on Form for Requestor",
"target_name": "Send to Requestor"
},
{
"source": 11,
"target": 12,
"type": "approve",
"source_name": "Set Completion ACL on Form",
"target_name": "Set Completion ACL on PO"
},
{
"source": 5,
"target": 9,
"type": "approve",
"source_name": "IT Project Manager Approves",
"target_name": "Send Email to Requestor"
},
{
"source": 12,
"target": 13,
"type": "approve",
"source_name": "Set Completion ACL on PO",
"target_name": "Set Completion ACL on Attachments"
},
{
"source": 13,
"target": 7,
"type": "approve",
"source_name": "Set Completion ACL on Attachments",
"target_name": "Send Email for Completion"
},
{
"source": 0,
"target": 14,
"type": "approve",
"source_name": "Initiate",
"target_name": "Set ACL on Attachment"
},
{
"source": 14,
"target": 1,
"type": "approve",
"source_name": "Set ACL on Attachment",
"target_name": "Find the Next Approver"
},
{
"source": 15,
"target": 10,
"type": "approve",
"source_name": "Update Comments of PM Rejection",
"target_name": "Set ACL on Form for Requestor"
},
{
"source": 5,
"target": 15,
"type": "reject",
"source_name": "IT Project Manager Approves",
"target_name": "Update Comments of PM Rejection"
},
{
"source": 16,
"target": 10,
"type": "approve",
"source_name": "Update Comments of FA Rejection",
"target_name": "Set ACL on Form for Requestor"
},
{
"source": 9,
"target": 17,
"type": "approve",
"source_name": "Send Email to Requestor",
"target_name": "Update Comments of PM"
},
{
"source": 17,
"target": 4,
"type": "approve",
"source_name": "Update Comments of PM",
"target_name": "Set Status & ACL for IT Sign Off Approvers"
},
{
"source": 6,
"target": 18,
"type": "approve",
"source_name": "Finance Approver",
"target_name": "Update Comments of FA"
},
{
"source": 18,
"target": 11,
"type": "approve",
"source_name": "Update Comments of FA",
"target_name": "Set Completion ACL on Form"
},
{
"source": 6,
"target": 16,
"type": "reject",
"source_name": "Finance Approver",
"target_name": "Update Comments of FA Rejection"
},
{
"source": 8,
"target": 19,
"type": "approve",
"source_name": "Send to Requestor",
"target_name": "Update Comments of Requestor"
},
{
"source": 19,
"target": 2,
"type": "approve",
"source_name": "Update Comments of Requestor",
"target_name": "Check for Manager"
},
{
"source": 7,
"target": 20,
"type": "approve",
"source_name": "Send Email for Completion",
"target_name": "End"
}
]; \t
\t 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");
\t \t \t .attr("class", function(d) { return "link " + d.type; })
\t \t \t .attr("marker-end", function(d) {
\t \t \t \t return "url(#end-arrow-" + d.type + ")"
\t \t \t \t console.log("url(#end-arrow- :" + "url(#end-arrow-" + d.type) \t \t \t
\t \t \t })
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 node = vis.selectAll(".node")
.data(nodes)
.enter().append("rect")
.attr('class',function(d){
/* var N = edges.length;
for (var i = 0; i < N; i++){
if (edges[i].source_name === d.nodes){
return edges[i].status;
}
} */
\t \t \t return d.status;
})
.attr({ rx: 5, ry: 5 })
.call(d3cola.drag); \t \t
var label = vis.selectAll(".label")
.data(nodes)
.enter().append("text")
.attr("class", "label")
// .attr("x",0)
// .attr("y",70)
.attr("font-family","FontAwesome")
// .attr('font-size', function(d) { return '70px';})
.text(function (d) {
if(d.execution_type == 'Manual')
return d.nodes+' \uf007' ;
else
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;
});
/**************FontAwesome****************/
/*var icons = ["fa-user"];
var s = d3.select("#wkfsvg");
var rect = s.selectAll("rect");
rect.selectAll("i").data(icons)
.enter().append("i")
.attr("class", function(d){
return "fa fa-user";
}) */
/***********************************/
label.on("dblclick", function(d){
d3.select('#stats').html("<b>" + d.nodes + "</b><br/>"
\t \t \t \t \t \t \t + "Status: "+d.status+"<br/>"
\t \t \t \t \t \t \t + "Performer Name: "+d.runtime_performer_name+"<br/>"
\t \t \t \t \t \t \t + "Completion Date: "+d.runtime_creation_date);
console.log("Double Clicked");
});
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;
\t
}
.node {
stroke: black;
stroke-width: 1.5px;
cursor: move;
fill: lightcoral;
}
.link {
fill: none;
stroke: #000;
stroke-width: 3px;
opacity: 0.7;
}
.label {
fill: black;
font-family: Verdana;
font-size: 25px;
text-anchor: middle;
cursor: move;
}
\t .link.reject {
\t \t stroke-dasharray: 0,2 1;
\t \t stroke: red;
\t \t fill: none;
\t \t stroke-width: 3px;
\t \t opacity: 0.7;
\t \t
\t }
\t
.completed {
fill: #66FF99;
}
\t .future {
\t fill: #99CCFF;
\t }
\t .pending {
\t fill: #CC66FF;
\t }
\t .startend {
\t fill: #CC6666; \t
\t }
\t
\t
\t div.tooltip {
\t text-align: left;
\t width: 300px;
\t height: 60px;
\t padding: 5px;
\t color:black;
\t font: 12px sans-serif;
\t background: #ccddff;
\t border: 0px;
\t pointer-events: none;
\t }<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>Есть пара проблем с этим кодом:
- Вместо значка в каждом прямоугольнике отображается пустой квадрат, который имеет «execute_type» как «Manual».
- Я не могу выровнять значок (который сейчас пустой прямоугольник) в верхнем правом углу внутри прямоугольника.
Может кто-то помочь в этом?
Спасибо. Появится значок. Есть ли способ, которым я не добавляю значок в строку вместо использования div или чего-то внутри прямоугольника? – kayasa
Я отредактировал свой ответ, потому что нашел решение, что бы вы хотели – Michael