我有一些D3代码可以创建矩形，将一些文本放入其中并根据某些逻辑连接每个节点。现在，对于每个节点，如果该节点的execution_type为“手动”，我想显示一个图标。图标需要与此示例类似：http://output.jsbin.com/eFAZABe/6
看了这个例子后，我检查了Font Awesome，发现“fa-user”提供了我正在寻找的那种图标。
所以，我想出了以下代码：
var d3cola = cola.d3adaptor().convergenceThreshold(0.1);
var width = 960, height = 700;
// REMOVE OLD SVG
d3.select("#wkfsvg").remove();
d3.select("#stats").remove();
// ADD NEW SVG
var outer = d3.select("body").append("svg")
.attr({ width: width, height: height, "pointer-events": "all" })
.attr("id","wkfsvg");
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')
.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'});
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'
})
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"
}
];
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"
}
];
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; })
.attr("marker-end", function(d) {
return "url(#end-arrow-" + d.type + ")"
console.log("url(#end-arrow- :" + "url(#end-arrow-" + 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 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;
}
} */
return d.status;
})
.attr({ rx: 5, ry: 5 })
.call(d3cola.drag);
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/>"
+ "Status: "+d.status+"<br/>"
+ "Performer Name: "+d.runtime_performer_name+"<br/>"
+ "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;
}
.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;
}
.link.reject {
stroke-dasharray: 0,2 1;
stroke: red;
fill: none;
stroke-width: 3px;
opacity: 0.7;
}
.completed {
fill: #66FF99;
}
.future {
fill: #99CCFF;
}
.pending {
fill: #CC66FF;
}
.startend {
fill: #CC6666;
}
div.tooltip {
text-align: left;
width: 300px;
height: 60px;
padding: 5px;
color:black;
font: 12px sans-serif;
background: #ccddff;
border: 0px;
pointer-events: none;
}<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>
此代码存在以下几个问题：
有人可以帮忙吗？
答案 0 :(得分：1)
更改字体系列并显示您的图标
.label {
fill: black;
font-family: FontAwesome;
/*font-family: Verdana;*/
font-size: 25px;
text-anchor: middle;
cursor: move;
}
并从javascript中删除.attr（＆＃34; font-family＆＃34;，＆＃34; FontAwesome＆＃34;）部分
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';} )
.html(function (d) {
if(d.execution_type == 'Manual')
return d.nodes + ' <tspan dx="0" dy="-10">\uf007</tspan>';
else
return d.nodes;
})
使用＆＃34; tspan＆＃34;在你的字符串中，你可以通过dx和dy移动你的图标