With JavaScript, How to Change the Z Index/Layer of an Svg <G> Element

With JavaScript, can I change the Z index/layer of an SVG g element?

Z index in SVG is defined by the order the elements appear in the document (subsequent elements are painted on top of previous elements).

You will have to change the element order if you want to bring a specific shape to the top.

Can we give higher z-index to an SVG tag?

This happens because your SVG has a "static" position by default.
Z-index only affects elements that have a position value other than static.

In your case assigning position: relative to your SVG will help.

Add the following to your css and it will work as expected (z-index will change on hover, since you applied it to :hover)

.box svg {
  position:relative;
}

Updating SVG Element Z-Index With D3

One of the solutions presented by the developer is: "use D3's sort operator to reorder the elements." (see https://github.com/mbostock/d3/issues/252)

In this light, one might sort the elements by comparing their data, or positions if they were dataless elements:

.on("mouseover", function(d) {
    svg.selectAll("path").sort(function (a, b) { // select the parent and sort the path's
      if (a.id != d.id) return -1;               // a is not the hovered element, send "a" to the back
      else return 1;                             // a is the hovered element, bring "a" to the front
  });
})

Apply z-index to SVG path

As an alternative, you can use "< use >"

Example:

<svg>
    <circle id="shape1" cx="20" cy="50" r="40" fill="yellow" />
    <rect id="shape2" x="4" y="20" width="200" height="50" fill="grey" />
    <circle id="shape3" cx="70" cy="70" r="50" fill="blue" />
    <use id="use" xlink:href="#shape2" />
</svg>

The shape2 layer will be the top most layer.

SVG re-ordering z-index (Raphael optional)

Gimme the Code!

// move element "on top of" all others within the same grouping
el.parentNode.appendChild(el); 

// move element "underneath" all others within the same grouping
el.parentNode.insertBefore(el,el.parentNode.firstChild);

// move element "on top of" all others in the entire document
el.ownerSVGElement.appendChild(el); 

// move element "underneath" all others in the entire document
el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild);

Within Raphael specifically, it's even easier by using toBack() and toFront():

raphElement.toBack()  // Move this element below/behind all others
raphElement.toFront() // Move this element above/in front of all others

Details

SVG uses a "painters model" when drawing objects: items that appear later in the document are drawn after (on top of) elements that appear earlier in the document. To change the layering of items, you must re-order the elements in the DOM, using appendChild or insertBefore or the like.

You can see an example of this here: http://phrogz.net/SVG/drag_under_transformation.xhtml

Drag the red and blue objects so that they overlap.
Click on each object and watch it pop to the top. (The yellow circles are intended to always be visible, however.)

The re-ordering of elements on this example is done by lines 93/94 of the source code:

el.addEventListener('mousedown',function(e){
  el.parentNode.appendChild(el); // move to top
  ...
},false);

When the mouse is pushed down on an element, it is moved to be the last element of all its siblings, causing it to draw last, "on top" of all others.

SVG animate layers z-index

You can't use z-index in SVG.

The way SVG works is that items that appear down the DOM tree have "higher z-index", so you will have to remove the items and append them at the end of your dom:

$('.svg_area').hover(function() {
    $('svg').append(this)
});

Here is a working example based on your code:

var map_links = [{"map_area":"har-hanegev","link":"http:\/whatever\/?region_cat=%d7%94%d7%a8-%d7%94%d7%a0%d7%92%d7%91","hover_color":"#62493d","tooltip":"<p>\u05d4\u05e8 \u05d4\u05e0\u05d2\u05d1<\/p>\n"},{"map_area":"beer-sheva","link":"http:\/whatever\/?region_cat=%d7%91%d7%90%d7%a8-%d7%a9%d7%91%d7%a2","hover_color":"#267a73","tooltip":"<p>\u05d1\u05d0\u05e8 \u05e9\u05d1\u05e2<\/p>\n"},{"map_area":"arava","link":"http:\/whatever\/?region_cat=%d7%a2%d7%a8%d7%91%d7%94","hover_color":"#be791c","tooltip":"<p>\u05e2\u05e8\u05d1\u05d4<\/p>\n"},{"map_area":"negev-north","link":"http:\/whatever\/?region_cat=%d7%a6%d7%a4%d7%95%d7%9f-%d7%94%d7%a0%d7%92%d7%91","hover_color":"#89992d","tooltip":"<p>\u05e6\u05e4\u05d5\u05df \u05d4\u05e0\u05d2\u05d1<\/p>\n"},{"map_area":"lachish","link":"http:\/whatever\/?region_cat=%d7%a2%d7%a8%d7%93-%d7%95%d7%99%d7%9d-%d7%94%d7%9e%d7%9c%d7%97","hover_color":"#937a58","tooltip":"<p>\u05d7\u05d1\u05dc \u05dc\u05db\u05d9\u05e9 \u05d5\u05d9\u05ea\u05d9\u05e8<\/p>\n"},{"map_area":"arad","link":"http:\/whatever\/?region_cat=%d7%a2%d7%a8%d7%93-%d7%95%d7%99%d7%9d-%d7%94%d7%9e%d7%9c%d7%97","hover_color":"#56a7a3","tooltip":"<p>\u05e2\u05e8\u05d3 \u05d5\u05d9\u05dd \u05d4\u05de\u05dc\u05d7<\/p>\n"}];
$('.svg_area').hover(function() {  $('svg').append(this)});

.st0{fill:#A68A64;}.st1{fill:#FFFFFF;}.st2{fill:#A2DAF4;}.st3{fill:#2E8982;}.st4{fill:#A7B610;}.st5{fill:#D8E748;}.st6{fill:#E69005;}.st7{fill:#FFCE7D;}.st8{fill:#715646;}.st9{fill:#9A7C6B;}.st10{fill:#68C6C2;}.st11{fill:#4AA09A;}svg{  width:200px;}.svg_area:hover{  animation: popup 500ms ease;  animation-fill-mode:forwards;  -webkit-animation-fill-mode: forwards;}@keyframes popup {  0% {    transform: scale(1);    transform-origin: center;  }  100% {    transform: scale(1.1);    transform-origin: center;    z-index: 99999;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="map_wrap">     <script>    </script><!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 61.8 124.7" style="enable-background:new 0 0 61.8 124.7;" xml:space="preserve"><g data-area="arava" class="svg_area"> <path class="st6" d="M53.3,46.7C43.2,52.3,36.5,63.5,34,67.7l-0.1,0.1c-0.4,0.6-0.7,1.1-0.8,1.4c-4.9,7.1-4.3,26.3-3.5,37.1l0,0.2  c0,0.3,0,0.4,0,0.5c0,0.8-0.8,2.7-1.5,4.1l0,0.1l0.5,1.4v1.1c0,0.5,0.2,0.9,0.4,1.3c0.2,0.5,0.5,1,0.5,1.7c0,0.4-0.1,0.8-0.2,1.1  c-0.1,0.3-0.2,0.6-0.2,1c0,1,0.3,2.6,0.6,3.4c0.1,0.3,0.3,0.5,0.4,0.8c0.2,0.3,0.5,0.7,0.6,1.2l0.1,0.4l0.3-0.3  c0.1-0.1,0.1-0.1,0.2-0.2l0.1-0.1c0.1-0.1,0.1-0.3,0.2-0.4c0.1-0.2,0.1-0.4,0.3-0.6c0.1-0.1,0.2-0.1,0.2-0.2  c0.1-0.1,0.3-0.2,0.3-0.4c0.1-0.2,0.2-0.3,0.2-0.4c0.2-0.2,0.3-0.4,0.4-0.7c0.1-0.2,0.2-0.5,0.3-0.5l0.1,0l0.4-0.3l0.4-0.5  l-0.3-0.2l0.8-2.1l0-0.1c0-0.1-0.1-0.5,0.7-1.2l0.1-0.1l0-1.1l0.4-1.2l0.2-2.6l0,0c0.1-0.1,0.9-1.1,0.8-2.3c0,0,1.1-2.5,1.2-2.9  c0.1-0.3,0.2-0.5,0.3-0.7c0.3-0.7,0.5-1.2,0.1-2.2l0.1-3.5l0.8-1l0-0.1c0-0.4,0.2-2.2,0.3-2.8c0.1-1.2,0.7-2.4,2.2-3.7  c0.1-0.1,1.6-1.5,0.6-4.5l-0.8-3l0.6-2.2l0,0c0-0.3,0-1.9,1.2-3.7l0.1-0.1l-0.3-2l-1-1.2l0.2-1.8c0.2-0.3,0.9-1.5,1-2.8l0.7-2.4  l0,0c0-0.3,0-1.7,0.6-3l2.2-4.2c0.2-0.2,1.4-1.5,1.5-3.5c0-0.6,0.1-2.4,1-2.9l0.1,0l0-0.1c0.1-0.1,0.2-0.2,0.3-0.3  c0.4-0.3,0.9-0.7,0.5-1.7l0,0c0-0.1-0.1-3,1.6-4.5l0.1-0.1c0.8-0.4,1.4-0.8,1.7-1.4l0.2-0.6L53.3,46.7z"></path> <g>  <path class="st1" d="M35,76.5l2.4,1.1l-0.3,0.6l-1.9-0.9l-0.6,1.4l-0.4-0.2L35,76.5z M35.2,78.9l0.3-0.6l1.3,0.6l-0.3,0.6   L35.2,78.9z"></path>  <path class="st1" d="M38.5,75.2l-0.9,1.9l-0.4-0.2l0.5-1.1l-1.5-0.7l-0.5,1.1L35.2,76l0.7-1.6l1.9,0.9L38,75L38.5,75.2z"></path>  <path class="st1" d="M36.6,73c0.3-0.6,0.8-0.5,1.4-0.3l1.3,0.6L39,74l-1.3-0.6c-0.3-0.2-0.7-0.2-0.8,0.1l-0.3,0.7l-0.4-0.2   L36.6,73z"></path>  <path class="st1" d="M38.1,69.9c0,0,0.5,0.2,1,0.4c0.7,0.3,0.9,0.7,0.8,1.5c0,0.3-0.2,1.3-0.2,1.3L39.3,73l0.1-0.7l-2.2-0.5   l0.3-0.6l2,0.5c0-0.4,0-0.6-0.6-0.8l-1-0.5L38.1,69.9z"></path> </g> <g>  <path class="st1" d="M31.9,88.7v0.2h-1.3v-0.2h0.8v-1.1h-0.8v-0.2h1.1v1.3H31.9z"></path>  <path class="st1" d="M33.3,87.4v1.6h-0.3v-1.3h-0.9v-0.2H33.3z M32.2,88.1h0.3v0.9h-0.3V88.1z"></path>  <path class="st1" d="M34.1,87.4v0.8h-0.3v-0.8H34.1z"></path>  <path class="st1" d="M35.6,87.4v1.9h-0.3v-1.9H35.6z"></path>  <path class="st1" d="M36.3,87.4v0.8H36v-0.8H36.3z"></path>  <path class="st1" d="M37.9,87.4V88c0,0.4-0.2,0.7-0.6,0.8c-0.2,0.1-0.7,0.2-0.7,0.2l-0.1-0.2l0.4-0.2l-0.3-1.4H37l0.2,1.3   c0.2-0.1,0.4-0.2,0.4-0.6v-0.7H37.9z"></path> </g> <circle class="st7" cx="39.2" cy="88.1" r="0.5"></circle> <g>  <path class="st1" d="M32.4,94.4h-1.2v-1.6h0.7c0.4,0,0.5,0.2,0.5,0.6V94.4z M32.1,93.5c0-0.2,0-0.4-0.3-0.4h-0.4v1.1h0.7V93.5z"></path>  <path class="st1" d="M33,92.9v0.8h-0.3v-0.8H33z"></path>  <path class="st1" d="M34.7,92.9v0.8c0,0.6-0.3,0.8-0.7,0.8h0v-0.2h0c0.3,0,0.4-0.1,0.4-0.6v-0.5h-1v-0.2H34.7z M33.5,93.5h0.2v1.4   h-0.2V93.5z"></path>  <path class="st1" d="M35.4,92.9v1.6h-0.3v-1.6H35.4z"></path>  <path class="st1" d="M37,93.4c0,0.2-0.1,0.4-0.4,0.5l0.4,0.6h-1.2v-0.2h0.8l-0.9-1.3H36l0.5,0.8c0.2,0,0.2-0.1,0.2-0.3v-0.5H37   V93.4z"></path> </g> <g>  <path class="st1" d="M31.4,100.1c0,0-0.1-0.4-0.1-0.7c0-0.1,0-0.3,0-0.4c0-0.1,0-0.2,0.1-0.3H31v-0.2h0.8v0.2h-0.3   c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.2,0.1,0.4c0.1,0.4,0.1,0.7,0.1,0.7H31.4z"></path>  <path class="st1" d="M32.7,98.5c0.4,0,0.6,0.2,0.6,0.6v0.3c0,0.4-0.2,0.6-0.6,0.6h-0.5v-0.2h0.6c0.2,0,0.3-0.1,0.3-0.4v-0.3   c0-0.3-0.1-0.4-0.3-0.4h-0.3v0.6h-0.2v-0.8H32.7z"></path>  <path class="st1" d="M34.1,98.5v0.8h-0.3v-0.8H34.1z"></path>  <path class="st1" d="M35.6,98.5l-0.6,1.6h-0.3l0.5-1.3h-0.8v-0.5h0.2v0.3H35.6z"></path>  <path class="st1" d="M36.8,100.1l-0.6-0.9c-0.1,0-0.2,0.1-0.2,0.3l0,0.6h-0.3v-0.5c0-0.2,0.1-0.5,0.3-0.5l-0.3-0.5H36l0.5,0.8   c0.2,0,0.3-0.1,0.3-0.3v-0.5h0.2V99c0,0.3-0.1,0.5-0.4,0.5l0.4,0.6H36.8z"></path> </g> <g>  <path class="st1" d="M30.6,112.7c0.4,0,0.5,0.3,0.5,0.7v0.9h-0.3v-0.9c0-0.2,0-0.4-0.3-0.4h-0.4v1.4h-0.5V114H30v-1.1h-0.2v-0.2   H30.6z"></path>  <path class="st1" d="M32.6,112.7l-0.6,1.6h-0.3l0.5-1.3h-0.8v-0.5h0.2v0.3H32.6z"></path>  <path class="st1" d="M33.2,112.7v0.8h-0.3v-0.8H33.2z"></path>  <path class="st1" d="M34.6,114.2l-0.6-0.9c-0.1,0-0.2,0.1-0.2,0.3l0,0.6h-0.3v-0.5c0-0.2,0.1-0.5,0.3-0.5l-0.3-0.5h0.3l0.5,0.8   c0.2,0,0.3-0.1,0.3-0.3v-0.5h0.2v0.4c0,0.3-0.1,0.5-0.4,0.5l0.4,0.6H34.6z"></path> </g> <circle class="st7" cx="38.4" cy="93.6" r="0.5"></circle> <circle class="st7" cx="34.5" cy="101.3" r="0.5"></circle> <circle class="st7" cx="32" cy="115.4" r="0.5"></circle></g><g data-area="lachish" class="svg_area"> <path class="st0" d="M25,0l1.5,0.5c1.8,0.6,4.4,1.7,7,3.7c1.1,0.8,1.8,2.1,2,3.8l0,0.2l0.2,0C36.3,8.3,38.8,9,40.9,9  c0.7,0,1.4-0.1,1.9-0.3c0.8-0.3,2.4-1.5,2.8-2.8c0.2-0.5,0.1-1-0.2-1.4c-0.1-0.2-0.2-0.4-0.1-0.7c0.2-0.9,1.8-2.1,4.4-3.3l1-0.5H25  z"></path> <g style="display: inline;" class="toggle">  <path class="st1" d="M35.9,2.3v0.7c0,0.5-0.2,0.7-0.7,0.7h-0.8l-0.1-1.4h0.3l0.1,1.1h0.3c0.3,0,0.5-0.1,0.5-0.4V2.3H35.9z    M35.3,3.1H35V2.3h0.3V3.1z"></path>  <path class="st1" d="M36.6,2.3V3h-0.3V2.3H36.6z"></path>  <path class="st1" d="M37.3,2.3c0.4,0,0.5,0.2,0.5,0.6v0.3c0,0.4-0.2,0.5-0.5,0.5h-0.4V3.4h0.4c0.2,0,0.3-0.1,0.3-0.4V2.9   c0-0.3-0.1-0.4-0.3-0.4h-0.4V2.3H37.3z"></path>  <path class="st1" d="M39.1,2.3l-0.5,1.4h-0.3l0.4-1.1h-0.7V2h0.3v0.3H39.1z"></path>  <path class="st1" d="M41,2.3l-0.5,1.4h-0.3l0.4-1.1h-0.7V2h0.3v0.3H41z"></path>  <path class="st1" d="M42.3,3.7h-1.1l0-0.3h0.6V2.5h-0.6V2.3h0.9v1.1h0.2V3.7z"></path>  <path class="st1" d="M43.3,2.3c0.4,0,0.4,0.2,0.4,0.6v0.8h-0.3V2.9c0-0.2,0-0.4-0.2-0.4h-0.3v1.1h-0.3V2.3H43.3z"></path> </g></g><g> <path class="st2" d="M60.5,17.6v-0.6l-0.1-1.8v-1.2c-0.2-0.7,0.6-1.5,0.6-2.3c0-0.6,0.1-0.9,0.1-1.4l0.7-4.6c0-1.1-1-1.1-1.7-1  l-1-0.1c-0.2-0.1-0.4-0.2-0.6-0.2c-0.3,0-0.4,0.3-0.5,0.5c-0.2,0.3-0.4,0.9-0.6,1.2c-0.7,0.8-1.9,1.2-1.9,2.6  c0,0.3,0.1,0.3,0.1,0.5c0,0.4-0.2,0.5-0.3,0.7c-0.2,0.5-0.4,0.9-0.6,1.3c-0.2,0.8-0.9,1.3-0.9,2.3c0,0.6,0.4,0.7,0.4,1.4  c0,0.3-0.5,0.7-0.6,0.8c-0.1,0.2-0.1,0.5-0.2,0.6l-0.2,1c-0.1,0.2,0,0.8,0,1.1c0,0.2,0.1,0.4,0.1,0.5V20c0.1,0.7-0.5,1.3-0.5,2  c0,0.2,0.1,0.4,0.3,0.5v0.9c0.1,0.3,0.4,0.9,0.4,1.2l-0.1,0.6c0,0.3,0.4,1,0.4,1.4c0,0.5-0.4,0.7-0.4,1.2c0,0.3,0.4,0.2,0.6,0.2  c0,0.1,0.1,0.1,0.1,0.1c-0.8,1.3-1.5,2.7-1.4,3.4l0,0.1l0,0.1c-0.1,0.2,0,0.5,0.2,0.8c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0  c0,0,0,0.1,0,0.1c-0.4,0-0.8-0.2-1.3-0.2c-0.1,0.1-0.4,0.2-0.4,0.4l0.1,1v1c0.3,0.4,0.2,0.9,0.4,1.5c0.1,0.4,0.9,0.5,0.8,1.2v0.6  c0.3,0.4,0.1,0.8,0.3,1.3c0.1,0.3,0.9,0.2,1.6,0.3c0.2,0,0.3,0.2,0.4,0.2l1.6,0.3c0.5-0.3,1.8-0.5,1.9-1.4c0-0.1-0.1-0.1-0.1-0.2  l-0.5-1c0.1-0.5,0.3-0.6,0.7-1.1c0.1-0.1,0.4-0.5,0.4-0.9c0-1.3-1.2-1.5-2.3-1.8c-0.4-2.2-0.7-4.5-1-6.6c0.1,0,0.2-0.1,0.3-0.2  c0.2-0.2,0.2-0.5,0.3-0.9c0.3-0.7,0.9-1.3,1.3-1.7h0.1c0.1,0.4,0.5,0.6,0.5,1.1c0,0.6-0.5,1.4-0.5,2.2c0,0.3,0.2,0.5,0.5,0.5  c0.3,0,0.5-0.2,0.6-0.4c0.5-0.4,1-0.9,1-1.7c0-0.2-0.1-0.2-0.1-0.4c0-0.1,0.1-0.3,0.1-0.4l-0.2-0.6c0-0.1,0.1-0.2,0-0.4  c0-1,0.8-1.6,0.9-2.4v-0.6C61,21.4,61,20.1,61,20c0-0.1-0.1-0.1,0-0.2c-0.1,0-0.2,0-0.2-0.1c0.2-0.1,0.4-0.3,0.4-0.5  c0-0.2-0.1-0.4,0-0.6C60.6,18.6,60.6,17.9,60.5,17.6z"></path></g><g data-area="beer-sheva" class="svg_area"> <path class="st3" d="M34.4,16.5l-0.2-0.2l-0.2,0.2c-0.8,0.8-3.4,3.5-6,3.3c-10.1-0.6-11.8,1.1-12.6,2c-0.2,0.2-0.3,0.4-0.5,0.5  c-1.1,0.6-4.5,0.8-4.9,0.8l-2.9,1.2l0.2,0.3c5.7,6,11.6,7.2,15.6,7.2c1.9,0,3.3-0.2,4.2-0.4c11.7-1.9,15.4-6.3,16.1-7.1l0.1-0.2  L34.4,16.5z"></path> <g>  <path class="st1" d="M19.5,24.2c0,0,0,0.5,0,1.1c0,0.7-0.2,1.1-1,1.4c-0.3,0.1-1.2,0.4-1.2,0.4l-0.1-0.5l0.7-0.2l-0.5-2.2H18   l0.4,2c0.4-0.2,0.5-0.3,0.5-0.9v-1.1H19.5z"></path>  <path class="st1" d="M22.1,26.8H20l0-0.5h1.2v-1.6H20v-0.5h1.8v2.1h0.3V26.8z"></path>  <path class="st1" d="M25.4,24.2v1.3c0,0.9-0.4,1.3-1.3,1.3h-1.4l-0.2-2.6H23l0.2,2.1h0.7c0.5,0,0.9-0.1,0.9-0.8v-1.4H25.4z    M24.3,25.8h-0.6v-1.6h0.6V25.8z"></path>  <path class="st1" d="M28,24.2c0.7,0,0.8,0.5,0.8,1.1v1.5h-0.6v-1.4c0-0.4-0.1-0.7-0.4-0.7h-0.7v-0.5H28z"></path>  <path class="st1" d="M31.2,26.8l-0.9-1.5C30,25.4,30,25.5,30,25.8v1h-0.6v-0.9c0-0.4,0.1-0.8,0.6-0.9l-0.6-0.9H30l0.8,1.3   c0.3,0,0.3-0.2,0.3-0.5v-0.8h0.6v0.7c0,0.5-0.3,0.8-0.7,0.8l0.7,1H31.2z"></path>  <path class="st1" d="M34.4,26.8h-2.1l0-0.5h1.2v-1.6h-1.2v-0.5h1.8v2.1h0.3V26.8z"></path> </g></g><g data-area="negev-north" class="svg_area"> <path class="st4" d="M33.5,4.2C29.2,0.8,24.8,0,24.7,0l-4.9,0l-0.1,0.1c-0.1,0.3-0.2,0.6-0.3,0.8c-0.1,0.3-0.1,0.6-0.3,1  c-0.1,0.2-0.2,0.5-0.4,0.8c-0.3,0.5-0.6,1.1-0.7,1.7c-0.2,0.5-0.6,1-1,1.5c-0.4,0.5-0.7,0.9-0.9,1.4c-0.2,0.3-0.3,0.6-0.4,0.9  c-0.2,0.6-0.4,1.2-1,1.8c-1,1-1.6,2-2.1,2.9L0,27.4l9.9-4.3c0.5,0,3.8-0.2,4.9-0.8h0c0.2-0.1,0.4-0.3,0.5-0.5c0.9-1,2.5-2.6,12.6-2  c2.8,0.2,5.8-3.1,6.1-3.5l0-0.1C34.4,15.9,37.7,7.5,33.5,4.2z"></path> <g>  <path class="st1" d="M25.4,12.5v0.2h-1.3v-0.2h0.8v-1.1h-0.8v-0.2h1.1v1.3H25.4z"></path>  <path class="st1" d="M26.8,11.2v1.6h-0.3v-1.3h-0.9v-0.2H26.8z M25.6,11.9h0.3v0.9h-0.3V11.9z"></path>  <path class="st1" d="M28.3,11.2l-0.6,1.6h-0.3l0.5-1.3h-0.8v-0.5h0.2v0.3H28.3z"></path>  <path class="st1" d="M29.7,11.2c0.4,0,0.5,0.3,0.5,0.7v0.9H30v-0.9c0-0.2,0-0.5-0.3-0.5h-0.5v-0.2H29.7z"></path>  <path class="st1" d="M31.8,11.2v0.6c0,0.4-0.2,0.7-0.6,0.8c-0.2,0.1-0.7,0.2-0.7,0.2l-0.1-0.2l0.4-0.2l-0.3-1.4h0.3l0.2,1.3   c0.2-0.1,0.4-0.2,0.4-0.6v-0.7H31.8z"></path>  <path class="st1" d="M32.5,11.1V12h-0.3v-0.8H32.5z"></path> </g> <g>  <path class="st1" d="M25.2,16.1v1.6h-0.3v-1.3H24v-0.2H25.2z M24,16.8h0.3v0.9H24V16.8z"></path>  <path class="st1" d="M25.9,16.1v0.8h-0.3v-0.8H25.9z"></path>  <path class="st1" d="M27.5,16.1v0.8c0,0.6-0.3,0.8-0.7,0.8h0v-0.2h0c0.3,0,0.4-0.1,0.4-0.6v-0.5h-1v-0.2H27.5z M26.3,16.6h0.2V18   h-0.2V16.6z"></path>  <path class="st1" d="M29,16.1l-0.6,1.6h-0.3l0.5-1.3h-0.8v-0.5h0.2v0.3H29z"></path> </g> <g>  <path class="st1" d="M16.6,15.1v0.8c0,0.6-0.3,0.8-0.7,0.8h-0.4l-0.2-1.6h0.3l0.1,1.4h0.2c0.3,0,0.5-0.1,0.5-0.7v-0.4H16v-0.2   H16.6z"></path>  <path class="st1" d="M18.2,15.1v1.6h-0.3v-1.3H17v-0.2H18.2z M17,15.8h0.3v0.9H17V15.8z"></path>  <path class="st1" d="M19,15.1c0.4,0,0.5,0.3,0.5,0.7v0.9h-0.3v-0.9c0-0.2,0-0.5-0.3-0.5h-0.5v-0.2H19z"></path> </g> <g>  <path class="st1" d="M9.8,18.9l-0.6,1.6H9l0.5-1.3H8.7v-0.5h0.2v0.3H9.8z"></path>  <path class="st1" d="M10.4,18.9v1.6h-0.3v-1.6H10.4z"></path>  <path class="st1" d="M11.2,18.9c0.4,0,0.6,0.2,0.6,0.6v0.3c0,0.4-0.2,0.6-0.6,0.6h-0.4v-0.2h0.4c0.2,0,0.3-0.1,0.3-0.4v-0.3   c0-0.3-0.1-0.4-0.3-0.4h-0.5v-0.2H11.2z"></path>  <path class="st1" d="M13.4,18.9h0.3v0.8c0,0.5-0.3,0.8-0.8,0.8h-0.7l-0.1-1.6h0.3l0.1,1.4h0.4c0.3,0,0.5-0.1,0.5-0.5V18.9z    M13,18.9v1h-0.2v-1H13z"></path>  <path class="st1" d="M15.1,20.4l-0.6-0.9c-0.1,0-0.2,0.1-0.2,0.3l0,0.6h-0.3v-0.5c0-0.2,0.1-0.5,0.3-0.5l-0.3-0.5h0.3l0.5,0.8   c0.2,0,0.3-0.1,0.3-0.3v-0.5h0.2v0.4c0,0.3-0.1,0.5-0.4,0.5l0.4,0.6H15.1z"></path> </g> <g>  <path class="st1" d="M20.2,9.4h-1.7l0-0.4h0.9V7.7h-0.9V7.3h1.4V9h0.2V9.4z"></path>  <path class="st1" d="M21.1,8.8c-0.1,0.4-0.3,0.5-0.6,0.5h-0.1V8.9h0.2c0.4,0,0.5-0.3,0.5-0.7C21,8,21,7.7,21,7.7h-0.4V7.3h0.8   l0.3,2.1h-0.4L21.1,8.8L21.1,8.8z"></path>  <path class="st1" d="M22.2,9c0.2,0,0.2,0,0.2-0.3v-1h-0.3V7.3h0.8v1.5c0,0.4-0.2,0.5-0.5,0.5h-0.5V9H22.2z"></path>  <path class="st1" d="M25,7.3v2.1h-0.5V7.7h-1.2V7.3H25z M23.3,8.3h0.5v1.1h-0.5V8.3z"></path>  <path class="st1" d="M27,7.3v2.6h-0.5V7.3H27z"></path>  <path class="st1" d="M28.1,7.3v2.1h-0.5V7.3H28.1z"></path>  <path class="st1" d="M29.5,7.3c0.6,0,0.8,0.3,0.8,0.8v0.4c0,0.6-0.3,0.8-0.8,0.8h-0.9V9h0.8c0.3,0,0.4-0.1,0.4-0.5V8.2   c0-0.4-0.1-0.5-0.4-0.5h-0.3v0.8h-0.4V7.3H29.5z"></path>  <path class="st1" d="M32.4,7.9c0,0.4-0.1,0.6-0.6,0.7l0.5,0.8h-1.7V9h1l-1.1-1.7h0.5l0.6,1c0.3,0,0.3-0.2,0.3-0.4V7.3h0.5V7.9z"></path> </g> <circle class="st5" cx="16.4" cy="19.6" r="0.5"></circle> <circle class="st5" cx="20.6" cy="15.9" r="0.5"></circle> <circle class="st5" cx="29.9" cy="16.9" r="0.5"></circle> <ellipse transform="matrix(0.6972 -0.7169 0.7169 0.6972 1.3889 27.7289)" class="st5" cx="33.5" cy="12.2" rx="0.5" ry="0.5"></ellipse></g>

<g data-area="arad" class="svg_area"> <path class="st10" d="M50.7,0l-0.1,0c-0.2,0.1-4.9,2.2-5.3,3.8c-0.1,0.3,0,0.5,0.1,0.7c0.3,0.4,0.4,0.9,0.2,1.4  c-0.4,1.3-2,2.5-2.8,2.8C42.3,8.9,41.7,9,40.9,9c-2,0-4.3-0.6-5-0.8l-0.3-0.1l0,0.4c0.3,3.3-1,7-1.3,7.6l-0.1,0.2l19.1,16.2  l-0.1-0.7c0-0.1,0-0.3,0-0.4l0,0l0,0c0-0.7,0.6-2,1.2-3l0.1-0.2l-0.2-0.1v-0.2l-0.4,0c-0.1,0-0.3,0-0.3,0c0-0.1,0.1-0.3,0.1-0.4  c0.1-0.2,0.2-0.4,0.2-0.7c0-0.3-0.1-0.6-0.2-0.9c-0.1-0.2-0.1-0.4-0.1-0.5l0.2-0.7c0-0.4-0.2-0.8-0.4-1.3v-1.1l-0.2-0.1  c-0.1,0-0.1-0.2-0.1-0.3c0-0.3,0.1-0.5,0.2-0.8c0.2-0.4,0.3-0.8,0.3-1.2v-1.4c0-0.1,0-0.1-0.1-0.2c0-0.1-0.1-0.2-0.1-0.3  c0-0.1,0-0.2,0-0.3c0-0.2,0-0.6,0-0.7l0.2-0.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2,0.1-0.2c0.3-0.3,0.6-0.6,0.6-0.9  c0-0.4-0.1-0.6-0.3-0.8c-0.1-0.2-0.2-0.3-0.2-0.6c0-0.5,0.2-0.9,0.5-1.3c0.2-0.3,0.4-0.6,0.4-0.9c0.1-0.2,0.2-0.4,0.3-0.7  c0.1-0.2,0.2-0.4,0.3-0.7c0,0,0-0.1,0.1-0.1c0.1-0.1,0.2-0.3,0.2-0.7c0-0.2-0.1-0.3-0.1-0.3c0-0.1,0-0.1,0-0.2  c0-0.7,0.3-1.1,0.6-1.4L56.4,7l0-0.1c0.6-3.4,1.3-5.7,1.6-6.6L58.1,0H50.7z"></path> <g>  <ellipse transform="matrix(0.6972 -0.7169 0.7169 0.6972 5.8185 36.4232)" class="st11" cx="46" cy="11.3" rx="0.5" ry="0.5"></ellipse>  <g>   <g>    <path class="st1" d="M41.8,12v-1.3h-0.7v-0.2h1.2v0.2h-0.2V12H41.8z"></path>    <path class="st1" d="M43,10.4c0.4,0,0.5,0.3,0.5,0.7V12h-0.3v-0.9c0-0.2,0-0.5-0.3-0.5h-0.5v-0.2H43z"></path>    <path class="st1" d="M45,10.4v0.6c0,0.4-0.2,0.7-0.6,0.8c-0.2,0.1-0.7,0.2-0.7,0.2l-0.1-0.2l0.4-0.2l-0.3-1.4h0.3l0.2,1.3     c0.2-0.1,0.4-0.2,0.4-0.6v-0.7H45z"></path>   </g>  </g> </g> <g>  <ellipse transform="matrix(0.6972 -0.7169 0.7169 0.6972 1.3986 42.8694)" class="st11" cx="51.4" cy="19.8" rx="0.5" ry="0.5"></ellipse>  <g>   <g>    <path class="st1" d="M42.1,19.1c0.4,0,0.5,0.3,0.5,0.7v0.9h-0.3v-0.9c0-0.2,0-0.4-0.2-0.4h-0.4v1.3h-0.3v-1.6H42.1z"></path>    <path class="st1" d="M44,19.1l-0.6,1.6h-0.3l0.5-1.3h-0.8v-0.5h0.2v0.3H44z"></path>    <path class="st1" d="M44.8,20.4h0.4v-0.7c0-0.2-0.1-0.4-0.3-0.4h-0.2l-0.3,1.4h-0.3l0.3-1.3h-0.3v-0.2h0.7     c0.5,0,0.6,0.3,0.6,0.8v0.8h-0.7V20.4z"></path>    <path class="st1" d="M47,19.1v1.6h-0.3v-1.3h-0.9v-0.2H47z M45.8,19.8h0.3v0.9h-0.3V19.8z"></path>    <path class="st1" d="M49.4,20.7h-1.2v-1.6h0.7c0.4,0,0.5,0.2,0.5,0.6V20.7z M49.2,19.7c0-0.2,0-0.4-0.3-0.4h-0.4v1.1h0.7V19.7z"></path>    <path class="st1" d="M50.1,19.1v0.8h-0.3v-0.8H50.1z"></path>   </g>  </g> </g></g><g data-area="har-hanegev" class="svg_area"> <path class="st8" d="M55.5,40.2l0.2-0.3l-0.6-0.1l0,0h0c-0.1-0.1-0.2-0.2-0.4-0.2c-0.2,0-0.4,0-0.6,0c-0.3,0-0.7,0-0.8-0.1  c-0.1-0.2-0.1-0.4-0.1-0.5c0-0.2,0-0.5-0.2-0.7l0-0.5c0.1-0.5-0.3-0.8-0.5-1c-0.1-0.1-0.2-0.2-0.3-0.3c0-0.2-0.1-0.4-0.1-0.6  c0-0.3-0.1-0.7-0.3-1l0-1l-0.1-0.9c0,0,0.1-0.1,0.2-0.1c0.2,0,0.4,0.1,0.6,0.1C52.7,33,53,33,53.2,33l0.2,0l0.2-0.3l-10.2-8.6  l-0.2,0.2c-0.9,1.2-4.7,5.2-16.1,7.1c-0.9,0.1-2.4,0.4-4.2,0.4c-5.9,0-11.2-2.5-15.8-7.3l-0.1-0.1L0,27.4l2.1,5.3l0.2,0.5l0,0  l5.8,18.6L9,54.1l0.5,1.2c2.6,5.8,2.6,5.8,3.2,8.5c0.2,0.7,0.4,1.6,0.7,2.8c0.1,0.5,0.1,0.9,0,1.5c0,0.4-0.1,0.9-0.1,1.6l0,0.1  l1.7,2.2l-0.7,2.7l0.1,1.4l3.2,2.3c0,0.5,0.3,1.3,0.5,1.7l0.2,0.7c1.7,4.8,5.1,14.8,5.6,16.1l0.1,0.2h0c-0.1,0.2-0.1,0.5-0.1,0.7  l0,0.9l4.1,12.6l0.3-0.6c0.4-0.8,1.3-2.8,1.3-3.6c0-0.1,0-0.3,0-0.6l0-0.1c-0.8-10.8-1.4-30,3.5-37.1c0.2-0.3,0.5-0.8,0.9-1.5  c2.6-4.3,9.4-15.6,19.7-21.1l0.1-0.1l0-0.2c0-0.1,0-0.2,0-0.4c0-0.2-0.1-0.3-0.1-0.5c0,0-0.2-0.7,0.1-1.8  C53.8,42.7,55.3,40.5,55.5,40.2z"></path> <g>  <path class="st1" d="M36.3,41.7h-1.2v-1.6h0.7c0.4,0,0.5,0.2,0.5,0.6V41.7z M36.1,40.8c0-0.2,0-0.4-0.3-0.4h-0.4v1.1h0.7V40.8z"></path>  <path class="st1" d="M37.4,40.2c0.4,0,0.5,0.3,0.5,0.7v0.9h-0.3v-0.9c0-0.2,0-0.4-0.2-0.4H37v1.3h-0.3v-1.6H37.4z"></path>  <path class="st1" d="M38.6,40.2v1.6h-0.3v-1.6H38.6z"></path>  <path class="st1" d="M39.4,40.2c0.4,0,0.5,0.3,0.5,0.7v0.9h-0.3v-0.9c0-0.2,0-0.4-0.3-0.4H39v-0.2H39.4z"></path>  <path class="st1" d="M40.7,40.2V41h-0.3v-0.8H40.7z"></path> </g> <g>  <path class="st1" d="M21,50.1h-2.1l0-0.5h1.2v-1.6h-1.2v-0.5h1.8v2.1H21V50.1z"></path>  <path class="st1" d="M22.2,49.4c-0.1,0.5-0.4,0.7-0.8,0.7h-0.1v-0.5h0.3c0.5,0,0.6-0.4,0.6-0.8c0-0.3-0.1-0.7-0.1-0.7h-0.5v-0.5h1   l0.3,2.6h-0.5L22.2,49.4L22.2,49.4z"></path>  <path class="st1" d="M23.5,49.6c0.2,0,0.2-0.1,0.2-0.3v-1.3h-0.4v-0.5h1v1.9c0,0.5-0.2,0.7-0.6,0.7h-0.6v-0.5H23.5z"></path>  <path class="st1" d="M27,47.5v2.6h-0.6v-2.1h-1.5v-0.5H27z M24.9,48.7h0.6v1.4h-0.6V48.7z"></path>  <path class="st1" d="M29.7,47.5c0.7,0,0.8,0.5,0.8,1.1v1.5h-0.6v-1.4c0-0.4-0.1-0.7-0.4-0.7h-0.7v-0.5H29.7z"></path>  <path class="st1" d="M33.2,47.5v2.6h-0.6v-2.1h-1.5v-0.5H33.2z M31.1,48.7h0.6v1.4h-0.6V48.7z"></path> </g> <g>  <path class="st1" d="M21.2,57.5c0.4,0,0.5,0.3,0.5,0.7v0.9h-0.3v-0.9c0-0.2,0-0.5-0.3-0.5h-0.5v-0.2H21.2z"></path>  <path class="st1" d="M23.4,57.5v0.8c0,0.6-0.3,0.8-0.7,0.8h0v-0.2h0c0.3,0,0.4-0.1,0.4-0.6v-0.5h-1v-0.2H23.4z M22.2,58.1h0.2v1.4   h-0.2V58.1z"></path>  <path class="st1" d="M24.1,57.5v1.6h-0.3v-1.6H24.1z"></path>  <path class="st1" d="M25.7,58.8v0.2h-1.3v-0.2h0.8v-1.1h-0.8v-0.2h1.1v1.3H25.7z"></path>  <path class="st1" d="M28,57.5v1.6h-0.3v-1.3h-0.9v-0.2H28z M26.8,58.2H27v0.9h-0.3V58.2z"></path>  <path class="st1" d="M29,59.1v-1.3h-0.7v-0.2h1.2v0.2h-0.2v1.3H29z"></path>  <path class="st1" d="M31.1,57.5h0.3v0.8c0,0.5-0.3,0.8-0.8,0.8h-0.7l-0.1-1.6H30l0.1,1.4h0.4c0.3,0,0.5-0.1,0.5-0.5V57.5z    M30.7,57.5v1h-0.2v-1H30.7z"></path> </g> <g>  <path class="st1" d="M17.7,66.8v1.9h-0.3v-1.9H17.7z"></path>  <path class="st1" d="M18.5,66.8v1.6h-0.3v-1.6H18.5z"></path>  <path class="st1" d="M19.4,68.2h0.4v-0.7c0-0.2-0.1-0.4-0.3-0.4h-0.2l-0.3,1.4h-0.3l0.3-1.3h-0.3v-0.2h0.7c0.5,0,0.6,0.3,0.6,0.8   v0.8h-0.7V68.2z"></path>  <path class="st1" d="M20.9,66.8c0.4,0,0.5,0.3,0.5,0.7v0.9h-0.3v-0.9c0-0.2,0-0.5-0.3-0.5h-0.5v-0.2H20.9z"></path>  <path class="st1" d="M23.7,66.8v1.6h-0.3v-1.3h-0.9v-0.2H23.7z M22.6,67.5h0.3v0.9h-0.3V67.5z"></path>  <path class="st1" d="M24.7,66.8c0.4,0,0.6,0.2,0.6,0.6v0.3c0,0.4-0.2,0.6-0.6,0.6h-0.5v-0.2h0.6c0.2,0,0.3-0.1,0.3-0.4v-0.3   c0-0.3-0.1-0.4-0.3-0.4h-0.3v0.6h-0.2v-0.8H24.7z"></path>  <path class="st1" d="M27,67.3c0,0.2-0.1,0.4-0.4,0.5l0.4,0.6h-1.2v-0.2h0.8l-0.9-1.3H26l0.5,0.8c0.2,0,0.2-0.1,0.2-0.3v-0.5H27   V67.3z"></path>  <path class="st1" d="M27.9,68.2h0.4v-0.7c0-0.2-0.1-0.4-0.3-0.4h-0.2l-0.3,1.4h-0.3l0.3-1.3h-0.3v-0.2H28c0.5,0,0.6,0.3,0.6,0.8   v0.8h-0.7V68.2z"></path> </g> <g>  <path class="st1" d="M41.5,34.8v1.6h-0.3v-1.3h-0.9v-0.2H41.5z M40.4,35.5h0.3v0.9h-0.3V35.5z"></path>  <path class="st1" d="M42,36.2c0.1,0,0.2-0.1,0.2-0.3v-0.9H42v-0.2h0.5v1.1c0,0.3-0.1,0.4-0.4,0.4h-0.2v-0.2H42z"></path>  <path class="st1" d="M43.2,34.8v1.6h-0.3v-1.6H43.2z"></path>  <path class="st1" d="M44.2,36.2h0.4v-0.7c0-0.2-0.1-0.4-0.3-0.4h-0.2l-0.3,1.4h-0.3l0.3-1.3h-0.3v-0.2h0.7c0.5,0,0.6,0.3,0.6,0.8   v0.8h-0.7V36.2z"></path>  <path class="st1" d="M45.5,34.8v0.8h-0.3v-0.8H45.5z"></path>  <path class="st1" d="M46.6,36.4v-1.3h-0.7v-0.2H47v0.2h-0.2v1.3H46.6z"></path> </g>    </g></svg>    </div>

Reorder elements of SVG ( z-index ) in D3.js

I would recommend creating some "layers" using svg g elements which stands for "group".

When you render your chart, you can first define your layers:

var layer1 = svg.append('g');
var layer2 = svg.append('g');
var layer3 = svg.append('g');
// etc... for however many layers you need

Then when you append new elements, you can decide which layer you want them to be on, and it won't matter what order you assign them in, because the group elements have already been added to the DOM, and are ordered. For example:

var layer1 = svg.append('g');
var layer2 = svg.append('g');

var redCircle = layer2.append('circle')
    .attr('cx', 50)
    .attr('cy', 50)
    .attr('r', 16)
    .attr('fill', 'red')

var blueSquare = layer1.append('rect')
    .attr('x', 25)
    .attr('y', 25)
    .attr('width', 50)
    .attr('height', 50)
    .attr('fill', 'blue');

In this case the red circle will be visible above the blue square even though the blue square was created last. This is because the circle and the square are children of different group elements, which are in a pre-defined order.

Here's a FIDDLE of the above example so you can see it in action.

Doing this should take a lot of the guesswork out of when to add certain elements to your chart, and it also helps to organize your elements into a more logical arrangement. Hope that helps, and good luck.