D3.jsでノードを画像としてグラフ描画しているが、ノードを拡大表示した時に重なってしまう

実現したいこと

こちらを参考に、ノードを画像としたグラフを描画しています。ノードをmouseoverすると、ノードを拡大して表示したいと考えています。

発生している問題

このサンプルプログラムでは、ノードにmouseoverするとノードが拡大されますが、下の図のように選択するノードによっては、拡大させたいノードの上に他のノードが重なって表示されてしまいます。選択したノードが他のノードと重ならず、一番上になるように表示するには、どのようにすれば良いのでしょうか？

該当のソースコード

JavaScript
1// mouseover, mouseleave
2  var setEvents = images
3          .on( 'mouseenter', function() {
4            // select element in current context
5            d3.select( this )
6              .transition()
7              .attr("x", function(d) { return -60;})
8              .attr("y", function(d) { return -60;})
9              .attr("height", 100)
10              .attr("width", 100);
11          })
12          // set back
13          .on( 'mouseleave', function() {
14            d3.select( this )
15              .transition()
16              .attr("x", function(d) { return -25;})
17              .attr("y", function(d) { return -25;})
18              .attr("height", 50)
19              .attr("width", 50);
20          });
21
22
23#ノードの位置
24function tick() {
25 
26    path.attr("d", function(d) {
27 
28     var dx = d.target.x - d.source.x,
29           dy = d.target.y - d.source.y,
30           dr = Math.sqrt(dx * dx + dy * dy);
31           return   "M" + d.source.x + "," 
32            + d.source.y 
33            + "A" + dr + "," 
34            + dr + " 0 0,1 " 
35            + d.target.x + "," 
36            + d.target.y;
37  });
38    node.attr("transform", nodeTransform);    
39  }
40}
41
42/**
43 * Gives the coordinates of the border for keeping the nodes inside a frame
44 * http://bl.ocks.org/mbostock/1129492
45 */ 
46function nodeTransform(d) {
47  d.x =  Math.max(maxNodeSize, Math.min(w - (d.imgwidth/2 || 16), d.x));
48    d.y =  Math.max(maxNodeSize, Math.min(h - (d.imgheight/2 || 16), d.y));
49    return "translate(" + d.x + "," + d.y + ")";
50   }