radiaSVG/radia.js

// var R;


$(function() {
  $(window).resize(function() {
    var svgAspect = 1220 / 560;
    var windowWidth = $(window).width();
    var svgWidth = windowWidth - 20;
    var svgHeight = parseInt(svgWidth / svgAspect);
    $('svg').attr("width", svgWidth);
    $('svg').attr("height", svgHeight);
  });
  $(window).resize();
  $.getJSON("radia.json", {}, function(data) {
    var R = data;
    var $texts = [];
    $('g').each(function() {
 //     console.log("hi");
      if (typeof($(this).attr("id")) === 'undefined') {
        return;
      }

      $(this).click(function() {
        console.log($(this).attr("id"));
      });
      $(this).mouseover(function() {
        console.log($(this).attr("id"));
      });
    });

    $('#heartspng').hover(function() {
      $('#rajakani').css({"stroke": "#FF00FF"});  
      }, function() {
      $('#rajakani').css({'stroke': '#000000'});
    });


    $('text').each(function() {
      $(this).css({'cursor': 'pointer'});
      var $tspan = $(this).children('tspan').eq(0);
      var key = $.trim($tspan.text());
      if (R.hasOwnProperty(key)) {
        thisData = R[key];
        var $this = $(this);
//        $this.data("r", thisData);
        $this.data("name", thisData.name);
        $this.data("type", thisData.type);
        $this.data("link", thisData.link);
        $this.addClass(thisData.type);
        $this.tooltip({
          'delay': 0,
          'showURL': false,
          'bodyHandler': function() {
            return $(this).data("name");
          }
        });
        $texts.push($this);

        var highlightShadow = '2px 2px 1px #666';
        var highlightCSS = {
          'fontWeight': 'bold',
          'backgroundColor': '#ffff00'
        }

        var unhighlightCSS = {
          'fontWeight': 'normal',
          'backgroundColor': '#ffffff'
        }

        $this.mouseover(function(e) {
          var typ = $(this).data("type");
          for (var i=0; i<$texts.length;i++) {
            var $t = $texts[i];
            if ($t.data("type") == typ) {
              $t.css(highlightCSS);
            }
          }
//          $('.' + cls).addClass("highlighted");
//          console.log($('.' + cls).length);
        });

        $this.mouseout(function(e) {
          var typ = $(this).data("type");
          for (var i=0; i<$texts.length;i++) {
            var $t = $texts[i];
            if ($t.data("type") == typ) {
              $t.css(unhighlightCSS);
            }
          }
//          $('.' + cls).removeClass("highlighted");
        });

        $this.click(function() {
          window.open($(this).data("link"));
//          console.log($(this).data("link"));
        });
      }
    });
  });
});