d3js Linklabelholders在Jira插件中缺失

Question

我正在尝试在Jira插件中使用d3.js而我正在尝试使用链接标签，但它们在Jira页面中丢失了。正如您在dom中看到的那样，有链接标签持有者，它们包含文本。

然而，当我将相同的代码移动到jsfiddle时，我可以看到链接标签。能不能给我一个想法？

https://jsfiddle.net/vvcjptLq/

 var h, w;

 h = 300;
 w = 300;
 // create a new SuperHeroes

 var SuperHeroes = function(selector, w, h) {
   this.w = w;
   this.h = h;

   d3.select(selector).selectAll("svg").remove();

   this.svg = d3.select(selector).append("svg:svg")
     .attr('width', w)
     .attr('height', h);


   var defs = this.svg.insert("svg:defs")
     .data(["end"]);


   defs.enter().append("svg:path")
     .attr("d", "M0,-5L10,0L0,5");

   this.svg.append("svg:rect")
     .style("stroke", "#999")
     .style("fill", "#fff")
     .attr('width', w)
     .attr('height', h);

   this.force = d3.layout.force()
     .charge(function(d) {
       return d._children ? -d.size / 100 : -40;
     })
     .linkDistance(function(d) {
       return d.target._children ? 80 : 25;
     })
     .size([h, w]);
 };

 // some colour variables
 var tcBlack = "#130C0E";

 // rest of vars
 var maxNodeSize = 50,
   x_browser = 20,
   y_browser = 25;


 /*
 d3.json("marvel.json", function(json) {




     // Build the path
     var defs = this.svg.insert("svg:defs")
         .data(["end"]);


     defs.enter().append("svg:path")
         .attr("d", "M0,-5L10,0L0,5");

     this.update();
 });
 */

 /**
  *
  */
 SuperHeroes.prototype.update = function(json) {
   this.root = json;
   this.root.fixed = true;
   this.root.x = w / 2;
   this.root.y = h / 4;

   var nodes = this.flatten(this.root),
     links = d3.layout.tree().links(nodes);

   // Restart the force layout.
   this.force.nodes(nodes)
     .links(links)
     .gravity(0.05)
     .charge(-1500)
     .linkDistance(100)
     .friction(0.5)
     .linkStrength(function(l, i) {
       return 1;
     })
     .size([w, h])
     .on("tick", tick)
     .start();

   var path = this.svg.selectAll("path.link")
     .data(links, function(d) {
       return d.target.id;
     });

   path.enter().insert("svg:path")
     .attr("class", "link")
     .style("stroke", "#eee")
     .attr("id", function(d, i) {
       return "linkId_" + i;
     });

   path.enter().append("g").attr("class", "linklabelholder")
     .append("text")
     .attr("class", "linklabel")
     .style("font-size", "13px")
     .attr("text-anchor", "middle")
     .style("fill", "#000")
     .append("textPath")
     .style('text-anchor', 'middle')
     .attr('startOffset', '50%')
     .attr("xlink:href", function(d, i) {
       return "#linkId_" + i;
     })
     .text(function(d) {
       return "omer"; //Can be dynamic via d object
     });


   // Exit any old paths.
   path.exit().remove();



   // Update the nodes…
   var node = this.svg.selectAll("g.node")
     .data(nodes, function(d) {
       return d.id;
     });


   // Enter any new nodes.
   var nodeEnter = node.enter().append("svg:g")
     .attr("class", "node")
     .on("click", this.click)
     .call(this.force.drag);

   // Append a circle
   nodeEnter.append("svg:circle")
     .attr("r", function(d) {
       return Math.sqrt(d.size) / 10 || 4.5;
     })
     .style("fill", "#eee");


   // Append images
   var images = nodeEnter.append("svg:image")
     .attr("xlink:href", function(d) {
       return d.img;
     })
     .attr("x", function(d) {
       return -25;
     })
     .attr("y", function(d) {
       return -25;
     })
     .attr("height", 50)
     .attr("width", 50);

   // make the image grow a little on mouse over and add the text details on click
   var setEvents = images
     // Append hero text
     .on('click', function(d) {
       // d3.select("#h1").html(d.hero);
       // d3.select("#h2").html(d.name);
       // d3.select("#h3").html ("Take me to " + "<a href='" + d.link + "' >"  + d.hero + " web page ⇢"+ "</a>" );
     })

   .on('mouseenter', function() {
       // select element in current context
       d3.select(this)
         .transition()
         .attr("x", function(d) {
           return -60;
         })
         .attr("y", function(d) {
           return -60;
         })
         .attr("height", 100)
         .attr("width", 100);
     })
     // set back
     .on('mouseleave', function() {
       d3.select(this)
         .transition()
         .attr("x", function(d) {
           return -25;
         })
         .attr("y", function(d) {
           return -25;
         })
         .attr("height", 50)
         .attr("width", 50);
     });

   // Append hero name on roll over next to the node as well
   nodeEnter.append("text")
     .attr("class", "nodetext")
     .attr("x", x_browser)
     .attr("y", y_browser + 15)
     .attr("fill", tcBlack)
     .text(function(d) {
       return d.hero;
     });


   // Exit any old nodes.
   node.exit().remove();


   // Re-select for update.
   path = this.svg.selectAll("path.link");
   node = this.svg.selectAll("g.node");

   function tick() {
     path.attr("d", function(d) {
       var dx = d.target.x - d.source.x,
         dy = d.target.y - d.source.y,
         dr = Math.sqrt(dx * dx + dy * dy);
       return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
     });
     node.attr("transform", function(d) {
       return "translate(" + d.x + "," + d.y + ")";
     });
   }
 }


 /**
  * Gives the coordinates of the border for keeping the nodes inside a frame
  * http://bl.ocks.org/mbostock/1129492
  */
 SuperHeroes.prototype.nodeTransform = function(d) {
   d.x = Math.max(maxNodeSize, Math.min(w - (d.imgwidth / 2 || 16), d.x));
   d.y = Math.max(maxNodeSize, Math.min(h - (d.imgheight / 2 || 16), d.y));
   return "translate(" + d.x + "," + d.y + ")";
 }

 /**
  * Toggle children on click.
  */
 SuperHeroes.prototype.click = function(d) {
   if (d.children) {
     d._children = d.children;
     d.children = null;
   } else {
     d.children = d._children;
     d._children = null;
   }

   this.update();
 }


 /**
  * Returns a list of all nodes under the root.
  */
 SuperHeroes.prototype.flatten = function(root) {
   var nodes = [];
   var i = 0;

   function recurse(node) {
     if (node.children)
       node.children.forEach(recurse);
     if (!node.id)
       node.id = ++i;
     nodes.push(node);
   }

   recurse(root);
   return nodes;
 }

 SuperHeroes.prototype.cleanup = function() {
   this.update([]);
   this.force.stop();
 };

 var currentSuperHereos;
 var createSuperHeroes = function(json) {
   // remove previous flower to save memory
   if (currentSuperHereos) currentSuperHereos.cleanup();
   // adapt layout size to the total number of elements
   //        var total = countElements(json);
   //        w = parseInt(Math.sqrt(total) * 30, 10);
   //        h = parseInt(Math.sqrt(total) * 30, 10);

   var h, w;

   h = 300;
   w = 300;
   // create a new SuperHeroes
   currentSuperHereos = new SuperHeroes("#visualization", w, h).update(json);

 };

 createSuperHeroes(JSON.parse('{"name":"Deneme 4","img":"/jira/download/resources/com.omerfarukak.jira:my-project-template-resources/images/issueTypes/NetworkGear.png","children":[{"hero":"Denem1","name":"Denem1","img":"/jira/download/resources/com.omerfarukak.jira:my-project-template-resources/images/issueTypes/LoadBalancerInterface.png","additionalProperties":{}},{"hero":"Deneme2","name":"Deneme2","img":"/jira/download/resources/com.omerfarukak.jira-:my-project-template-resources/images/issueTypes/DataCenter.png","additionalProperties":{}},{"hero":"Deneme 3","name":"Deneme 3","img":"/jira/download/resources/com.omerfarukak.jira:my-project-template-resources/images/issueTypes/DB2Catalog.png","additionalProperties":{}},{"hero":"xcvzxc","name":"xcvzxc","img":"/jira/download/resources/com.omerfarukak.jira:my-project-template-resources/images/issueTypes/VirtualMachineObject.png","additionalProperties":{}}],"additionalProperties":{}}'));

path.link {
  fill: none;
  stroke-width: 2px;
}
.node:not(:hover) .nodetext {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="visualization">
  <header id="visgraph">
    <div id="h1"></div>
    <div id="h2"></div>
    <div id="h3"></div>
  </header>

</div>

Answer 1

我认为我的d3.js有问题，我再次下载了d3.js，现在它正在运行。