D3.js 发送节点/图像后面的路径/链接

Question

我希望能够发送中心图像后面的路径/链接/边缘（示例中的 Marvel 符号）。

我正在使用这个例子：http ://bl.ocks.org/eesur/be2abfb3155a38be4de4

启动时，一切都像它应该的那样，但是当您单击 Marvel 符号，然后再次单击时，路径/链接会在图像前面打开。

我很确定问题出在点击功能上，但不知道从哪里开始。

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);

body {

  font-family: "Source Code Pro", Consolas, monaco, monospace;

  line-height: 160%;

  font-size: 16px;

  margin: 0;

}

path.link {

  fill: none;

  stroke-width: 2px;

}

.node:not(:hover) .nodetext {

  display: none;

}

h1 {

  font-size: 36px;

  margin: 10px 0;

  text-transform: uppercase;

  font-weight: normal;

}

h2,

h3 {

  font-size: 18px;

  margin: 5px 0;

  font-weight: normal;

}

header {

  padding: 20px;

  position: absolute;

  top: 0;

  left: 0;

}

a:link {

  color: #EE3124;

  text-decoration: none;

}

a:visited {

  color: #EE3124;

}

a:hover {

  color: #A4CD39;

  text-decoration: underline;

}

a:active {

  color: #EE3124;

}

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<section id="vis"></section>

Answer 1

d3.selection.raise()在版本 3中似乎还不存在；如果它确实存在，您应该将其应用于父级，而不是图像。SVG 结构是svg > g.node > img，但是更改内部图像的位置g.node不会执行任何操作 - 它是独生子。将其应用到g.node.我在答案中提出的另一个选择是使用两个容器，一个用于路径，一个用于节点。那么，顺序并不重要。我在下面实现了这个。var json = {&nbsp; "name": "marvel",&nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/marvel.png",&nbsp; "children": [{&nbsp; &nbsp; &nbsp; "name": "Heroes",&nbsp; &nbsp; &nbsp; "children": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Spider-Man",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Peter Benjamin Parker",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/54/spider-man",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "CAPTAIN MARVEL",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Carol Danvers",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/9/captain_marvel",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "HULK",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Robert Bruce Banner",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/25/hulk",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_hulk.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Black Widow",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Natalia 'Natasha' Alianovna Romanova",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/6/black_widow",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_blackwidow.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Daredevil",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Matthew Michael Murdock",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/11/daredevil",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_daredevil.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Wolverine",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "James Howlett",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/66/wolverine",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_wolverine.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Captain America",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Steven Rogers",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/8/captain_america",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainamerica.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Iron Man",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Anthony Edward 'Tony' Stark",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/29/iron_man",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_ironman.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "THOR",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Thor Odinson",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/60/thor",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_thor.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "name": "Villains",&nbsp; &nbsp; &nbsp; "children": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Dr. Doom",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Victor von Doom",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/13/dr_doom",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/drdoom.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Mystique",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Unrevealed",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/1552/mystique",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/mystique.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Red Skull",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Johann Shmidt",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/1901/red_skull",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/redskull.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Ronan",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Ronan",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/49/ronan",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/ronan.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Magneto",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Max Eisenhardt",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/35/magneto",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/magneto.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Thanos",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Thanos",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/58/thanos",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/thanos.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Black Cat",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "Felicia Hardy",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/271/black_cat",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/blackcat.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "name": "Teams",&nbsp; &nbsp; &nbsp; "children": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Avengers",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/68/avengers",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/avengers.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Guardians of the Galaxy",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/70/guardians_of_the_galaxy",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/gofgalaxy.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Defenders",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/534/defenders",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/defenders.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "X-Men",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/71/x-men",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/xmen.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Fantastic Four",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/69/fantastic_four",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/fantasticfour.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hero": "Inhumans",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "link": "http://marvel.com/characters/1040/inhumans",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "img": "http://marvel-force-chart.surge.sh/marvel_force_chart_img/inhumans.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "size": 40000&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]};// some colour variablesvar tcBlack = "#130C0E";// rest of varsvar w = 960,&nbsp; h = 800,&nbsp; maxNodeSize = 50,&nbsp; x_browser = 20,&nbsp; y_browser = 25,&nbsp; root;var vis;var force = d3.layout.force();vis = d3.select("#vis").append("svg").attr("width", w).attr("height", h);var pathContainer = vis.append("g").attr("class", "paths");var nodeContainer = vis.append("g").attr("class", "nodes");root = json;root.fixed = true;root.x = w / 2;root.y = h / 4;// Build the pathvar defs = vis.insert("svg:defs")&nbsp; .data(["end"]);defs.enter().append("svg:path")&nbsp; .attr("d", "M0,-5L10,0L0,5");update();function update() {&nbsp; var nodes = flatten(root),&nbsp; &nbsp; links = d3.layout.tree().links(nodes);&nbsp; // Restart the force layout.&nbsp; force.nodes(nodes)&nbsp; &nbsp; .links(links)&nbsp; &nbsp; .gravity(0.05)&nbsp; &nbsp; .charge(-1500)&nbsp; &nbsp; .linkDistance(100)&nbsp; &nbsp; .friction(0.5)&nbsp; &nbsp; .linkStrength(function(l, i) {&nbsp; &nbsp; &nbsp; return 1;&nbsp; &nbsp; })&nbsp; &nbsp; .size([w, h])&nbsp; &nbsp; .on("tick", tick)&nbsp; &nbsp; .start();&nbsp; var path = pathContainer.selectAll("path.link")&nbsp; &nbsp; .data(links, function(d) {&nbsp; &nbsp; &nbsp; return d.target.id;&nbsp; &nbsp; });&nbsp; path.enter().insert("svg:path")&nbsp; &nbsp; .attr("class", "link")&nbsp; &nbsp; // .attr("marker-end", "url(#end)")&nbsp; &nbsp; .style("stroke", "#eee");&nbsp; // Exit any old paths.&nbsp; path.exit().remove();&nbsp; // Update the nodes…&nbsp; var node = nodeContainer.selectAll("g.node")&nbsp; &nbsp; .data(nodes, function(d) {&nbsp; &nbsp; &nbsp; return d.id;&nbsp; &nbsp; });&nbsp; // Enter any new nodes.&nbsp; var nodeEnter = node.enter().append("svg:g")&nbsp; &nbsp; .attr("class", "node")&nbsp; &nbsp; .attr("transform", function(d) {&nbsp; &nbsp; &nbsp; return "translate(" + d.x + "," + d.y + ")";&nbsp; &nbsp; })&nbsp; &nbsp; .on("click", click)&nbsp; &nbsp; .call(force.drag);&nbsp; // Append a circle&nbsp; nodeEnter.append("svg:circle")&nbsp; &nbsp; .attr("r", function(d) {&nbsp; &nbsp; &nbsp; return Math.sqrt(d.size) / 10 || 4.5;&nbsp; &nbsp; })&nbsp; &nbsp; .style("fill", "#eee");&nbsp; // Append images&nbsp; var images = nodeEnter.append("svg:image")&nbsp; &nbsp; .attr("xlink:href", function(d) {&nbsp; &nbsp; &nbsp; return d.img;&nbsp; &nbsp; })&nbsp; &nbsp; .attr("x", function(d) {&nbsp; &nbsp; &nbsp; return -25;&nbsp; &nbsp; })&nbsp; &nbsp; .attr("y", function(d) {&nbsp; &nbsp; &nbsp; return -25;&nbsp; &nbsp; })&nbsp; &nbsp; .attr("height", 50)&nbsp; &nbsp; .attr("width", 50);&nbsp; // make the image grow a little on mouse over and add the text details on click&nbsp; var setEvents = images&nbsp; &nbsp; // Append hero text&nbsp; &nbsp; .on('click', function(d) {&nbsp; &nbsp; &nbsp; d3.select("h1").html(d.hero);&nbsp; &nbsp; &nbsp; d3.select("h2").html(d.name);&nbsp; &nbsp; &nbsp; d3.select("h3").html("Take me to " + "<a href='" + d.link + "' >" + d.hero + " web page ⇢" + "</a>");&nbsp; &nbsp; })&nbsp; &nbsp; .on('mouseenter', function() {&nbsp; &nbsp; &nbsp; // select element in current context&nbsp; &nbsp; &nbsp; d3.select(this)&nbsp; &nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; &nbsp; .attr("x", function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return -60;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .attr("y", function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return -60;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .attr("height", 100)&nbsp; &nbsp; &nbsp; &nbsp; .attr("width", 100);&nbsp; &nbsp; })&nbsp; &nbsp; // set back&nbsp; &nbsp; .on('mouseleave', function() {&nbsp; &nbsp; &nbsp; d3.select(this)&nbsp; &nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; &nbsp; .attr("x", function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return -25;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .attr("y", function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return -25;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .attr("height", 50)&nbsp; &nbsp; &nbsp; &nbsp; .attr("width", 50);&nbsp; &nbsp; });&nbsp; // Append hero name on roll over next to the node as well&nbsp; nodeEnter.append("text")&nbsp; &nbsp; .attr("class", "nodetext")&nbsp; &nbsp; .attr("x", x_browser)&nbsp; &nbsp; .attr("y", y_browser + 15)&nbsp; &nbsp; .attr("fill", tcBlack)&nbsp; &nbsp; .text(function(d) {&nbsp; &nbsp; &nbsp; return d.hero;&nbsp; &nbsp; });&nbsp; // Exit any old nodes.&nbsp; node.exit().remove();&nbsp; // Re-select for update.&nbsp; path = pathContainer.selectAll("path.link");&nbsp; node = nodeContainer.selectAll("g.node");&nbsp; function tick() {&nbsp; &nbsp; path.attr("d", function(d) {&nbsp; &nbsp; &nbsp; var dx = d.target.x - d.source.x,&nbsp; &nbsp; &nbsp; &nbsp; dy = d.target.y - d.source.y,&nbsp; &nbsp; &nbsp; &nbsp; dr = Math.sqrt(dx * dx + dy * dy);&nbsp; &nbsp; &nbsp; return "M" + d.source.x + "," +&nbsp; &nbsp; &nbsp; &nbsp; d.source.y +&nbsp; &nbsp; &nbsp; &nbsp; "A" + dr + "," +&nbsp; &nbsp; &nbsp; &nbsp; dr + " 0 0,1 " +&nbsp; &nbsp; &nbsp; &nbsp; d.target.x + "," +&nbsp; &nbsp; &nbsp; &nbsp; d.target.y;&nbsp; &nbsp; });&nbsp; &nbsp; node.attr("transform", nodeTransform);&nbsp; }}/**&nbsp;* Gives the coordinates of the border for keeping the nodes inside a frame&nbsp;* http://bl.ocks.org/mbostock/1129492&nbsp;*/function nodeTransform(d) {&nbsp; d.x = Math.max(maxNodeSize, Math.min(w - (d.imgwidth / 2 || 16), d.x));&nbsp; d.y = Math.max(maxNodeSize, Math.min(h - (d.imgheight / 2 || 16), d.y));&nbsp; return "translate(" + d.x + "," + d.y + ")";}/**&nbsp;* Toggle children on click.&nbsp;*/function click(d) {&nbsp; if (d.children) {&nbsp; &nbsp; d._children = d.children;&nbsp; &nbsp; d.children = null;&nbsp; } else {&nbsp; &nbsp; d.children = d._children;&nbsp; &nbsp; d._children = null;&nbsp; }&nbsp; update();}/**&nbsp;* Returns a list of all nodes under the root.&nbsp;*/function flatten(root) {&nbsp; var nodes = [];&nbsp; var i = 0;&nbsp; function recurse(node) {&nbsp; &nbsp; if (node.children)&nbsp; &nbsp; &nbsp; node.children.forEach(recurse);&nbsp; &nbsp; if (!node.id)&nbsp; &nbsp; &nbsp; node.id = ++i;&nbsp; &nbsp; nodes.push(node);&nbsp; }&nbsp; recurse(root);&nbsp; return nodes;}@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);body {&nbsp; font-family: "Source Code Pro", Consolas, monaco, monospace;&nbsp; line-height: 160%;&nbsp; font-size: 16px;&nbsp; margin: 0;}path.link {&nbsp; fill: none;&nbsp; stroke-width: 2px;}.node:not(:hover) .nodetext {&nbsp; display: none;}h1 {&nbsp; font-size: 36px;&nbsp; margin: 10px 0;&nbsp; text-transform: uppercase;&nbsp; font-weight: normal;}h2,h3 {&nbsp; font-size: 18px;&nbsp; margin: 5px 0;&nbsp; font-weight: normal;}header {&nbsp; padding: 20px;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;}a:link {&nbsp; color: #EE3124;&nbsp; text-decoration: none;}a:visited {&nbsp; color: #EE3124;}a:hover {&nbsp; color: #A4CD39;&nbsp; text-decoration: underline;}a:active {&nbsp; color: #EE3124;}<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script><section id="vis"></section>