javascript - 图标显示不正确

Question

我有一些 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>

这段代码有几个问题:

1. 在“execution_type”为“Manual”的每个矩形中显示一个空白方 block 而不是图标。
2. 我无法将图标(现在是空白方 block )与矩形内的右上角对齐。

有人可以帮忙吗？

Answer 1

1. 更改字体系列并显示您的图标

       .label {
       fill: black;
       font-family: FontAwesome;
       /*font-family: Verdana;*/
       font-size: 25px;
       text-anchor: middle;
       cursor: move;
   }
   

   并从 javascript 中删除 .attr("font-family","FontAwesome") 部分

   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;
             })
   

2. 在字符串中使用“tspan”，您可以通过 dx 和 dy 移动图标