2012-07-30 5 views
1

TypeError 개체가 IE8에서 msg 메서드의이 속성을 지원하지 않습니다. 내가 노드와 링크 (즉, 그래프)IE8 TypeError 개체가 메서드의이 속성을 지원하지 않습니다.

소스를 그릴 자바 스크립트의 protovis을 사용하고

은 다음과 내가 ansolutely 우둔입니다.

힌트가 있습니까? "protovis +

<h2>Topology</h2> 


<!--<script src="/static/media/js/jquery.tipsy.js"></script>--> 
<script src="/static/media/js/tooltip.topology.js"></script> 
<link rel="stylesheet" type="text/css" href="/static/media/css/tooltip.topology.css" /> 
<link rel="stylesheet" type="text/css" href="/static/media/css/tooltip.css" /> 

</script> 

<script type="text/javascript+protovis"> 
/* ProtoVIS data */ 

var data = { 
    nodes: [ 

     {nodeValue:"31", nodeName:"00:0a:00:26:f1:3c:9d:40", group:"0", 


      nodeConnections:[{'target_datapath': '00:0a:00:26:f1:3d:a5:40', 'src_port': '21', 'target_port': '22'}, {'target_datapath': '0a:90:c0:91:34:35:ef:00', 'src_port': '23', 'target_port': '47'}, {'src_port': '22', 'target_datapath': '00:0a:00:26:f1:45:1d:c0', 'target_port': '21'}] 

     }, 

     {nodeValue:"38", nodeName:"00:0a:00:26:f1:3d:a5:40", group:"0", 


      nodeConnections:[{'src_port': '22', 'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'target_port': '21'}] 

     }, 

     {nodeValue:"25", nodeName:"00:0a:00:26:f1:45:1d:c0", group:"0", 


      nodeConnections:[{'target_datapath': '00:0a:00:26:f1:45:3c:c0', 'src_port': '23', 'target_port': '21'}, {'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'src_port': '21', 'target_port': '22'}] 

     }, 

     {nodeValue:"20", nodeName:"00:0a:00:26:f1:45:3c:c0", group:"0", 


      nodeConnections:[{'src_port': '21', 'target_datapath': '00:0a:00:26:f1:45:1d:c0', 'target_port': '23'}] 

     }, 

     {nodeValue:"1", nodeName:"0a:90:c0:91:34:35:ef:00", group:"0", 


      nodeConnections:[{'src_port': '47', 'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'target_port': '23'}] 

     }, 

     {nodeValue:"b3036750-27ab-49b6-8f69-abc4e75dcd58", nodeName:"smartx-node-1", group:"1", 

      nodeVms: ['VM6'], 
      nodeVmInterfaces: [{'switch': '0a:90:c0:91:34:35:ef:00', 'port': '39', 'name': 'eth1'}] 


     }, 

     {nodeValue:"e79fb114-7dd7-4164-8eb7-364afa303ee9", nodeName:"smartx-jeju", group:"1", 

      nodeVms: ['VMJeju1'], 
      nodeVmInterfaces: [] 


     } 

    ], 
    links: [ 

     {source:1, target:0, value:"rsc_id_42-rsc_id_34"}, 

     {source:3, target:2, value:"rsc_id_23-rsc_id_29"}, 

     {source:4, target:0, value:"rsc_id_17-rsc_id_36"}, 

     {source:0, target:2, value:"rsc_id_35-rsc_id_28"}, 

     {source:0, target:4, value:"rsc_id_36-rsc_id_17"}, 

     {source:2, target:3, value:"rsc_id_29-rsc_id_23"}, 

     {source:0, target:1, value:"rsc_id_34-rsc_id_42"}, 

     {source:2, target:0, value:"rsc_id_28-rsc_id_35"}, 

     {source:5, target:4, value:"br_eth2:39"} 


    ], 
} 


/* Useful functi ns*/ 

function get_node_info_formated(d){ 
    type = get_node_type(d); 
     if(type == "openflow") { 
      var nameString = "<b>Switch Datapath ID: "+d.nodeName+"</b><br><br>"; 
      if(d.nodeConnections.length>0){ 
       connectionsString = "<b>Connections:</b><br>"; 
       for (i=0;i<d.nodeConnections.length;i++){ 
        connectionsString = connectionsString + "<b>·Port "+d.nodeConnections[i]['src_port']+"</b> to Switch "+d.nodeConnections[i]['target_datapath']+" at Port "+d.nodeConnections[i]['target_port']+"<br>"; 
       } 
      } 
      else{ 
       connectionsString = ""; 
      } 
      return nameString+connectionsString ; 
     } else if(type == "planetlab") { 
      return nameString; 
     } else if(type == "vtserver") { 
      var nameString = "<b>Server: "+d.nodeName+"</b><br><br>";   
      if (d.nodeVms.length > 0){ 
       var vmListString = "<b>VMs ("+d.nodeVms.length+"):</b><br clear=left>"; 
       for (i=0;i<d.nodeVms.length;i++){ 
        vmListString = vmListString + d.nodeVms[i]; 
        if (i < d.nodeVms.length-1){ 
         vmListString = vmListString + ", "; 
        } 
        else{ 
         vmListString = vmListString +"<br clear = left><br clear=left>"; 
        } 
       } 
      } 
      else{ 
       vmListString = "<b>No VMs in this Server </b></br><br clear=left>" 
      } 
      var vmInterfacesString = "<b>VMs Interfaces:</b><br clear=left>" 
      for (i=0;i<d.nodeVmInterfaces.length;i++){ 
       vmInterfacesString = vmInterfacesString + "· "+"<b>"+d.nodeVmInterfaces[i]['name']+"</b> to Switch: "+d.nodeVmInterfaces[i]['switch']+ " at port: "+d.nodeVmInterfaces[i]['port']+"<br clear=left>"; 
      } 
      return nameString + vmListString+vmInterfacesString; 
     } 


} 

function get_node_type(d) { 
    var of_groups_len = 1; 
    var pl_groups_len = 0; 
    var vt_aggs_len = 1; 
    if(d.group < of_groups_len) { 
     return "openflow"; 
    } else if(d.group < of_groups_len + pl_groups_len) { 
     return "planetlab"; 
    } else if (d.group <(of_groups_len + pl_groups_len+vt_aggs_len)){ 
    return "vtserver" 
    }else{ 
     return "unknown"; 
    } 
} 
/* On Click event functions */ 
function clickSwitchOrLink(d){ 
    /* if all are selected then unselect all */ 
     selected_len = $(":checkbox:checked.node_id_"+d.nodeValue).length 
     all_len = $(":checkbox:.node_id_"+d.nodeValue).length 
     if(selected_len == all_len) { 
      $(":checkbox:checked.node_id_"+d.nodeValue).click(); 
     } 
     /* else, select all */ 
     else { 
      $(":checkbox:not(:checked).node_id_"+d.nodeValue).click(); 
     } 
} 

function clickServer(d){ 

} 


/* Zooming routines */ 

cur_zoom = 1; 

function zoomIn(zoom) { 
     cur_zoom = cur_zoom + zoom; 
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/ 
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2)); 
     vis.render(); 
     return false; 
} 

function zoomOut(zoom) { 
    if(cur_zoom-zoom >0) 
      cur_zoom = cur_zoom - zoom; 
    else 
     return false; 
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/ 
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2)); 
     vis.render(); 
     return false; 
} 

function zoomReset() { 
    // value is 0.99 due to Firefox bug when it is 1 
    cur_zoom=0.99; 
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/ 
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2)); 
    vis.render(); 
    return false; 
} 


/* Instansiation General parameters*/ 
var w = 740, 
    h = 400, 
    colors = pv.Colors.category20(); 

var vis; 
vis = new pv.Panel().canvas('target') 
    .width(w) 
    .height(h) 
    .fillStyle("white") 

var force = vis.add(pv.Layout.Force) 
    .bound(true) 
    .nodes(data.nodes) 
    .links(data.links) 
    .iterations(90); 

force.springLength(100); 
force.chargeConstant(0.1); 
force.chargeTheta(0.9); 

force.link.add(pv.Line) 
    .strokeStyle(function(d, p) { 
     /* if any resources on the link are selected */ 
     rsc_ids = p.value.split("-"); 
     if($(":checkbox#"+rsc_ids[0]+":checked").length) { 
      return "#990000"; 
     } 
     if($(":checkbox#"+rsc_ids[1]+":checked").length) { 
      return "#990000"; 
     } 
     return "black"; 
    }); 

//force.label.add(pv.Label); 
    //.top(); 

/* 
force.node.add(pv.Dot) 
    .size(function(d) (50)) 
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group)) 
    .strokeStyle(function() this.fillStyle().darker()) 
    .lineWidth(1) 
    .title(function(d) d.nodeName) 
    .event("mousedown", pv.Behavior.drag()) 
    .event("drag", force); 
*/ 

//$("#selected_node_info").hide() 

force.node.add(pv.Image) 
    .url(function (d) { 
     type = get_node_type(d); 
     if(type == "openflow") { 
      return "/static/media/img/switch-tiny.png"; 
     } else if(type == "planetlab") { 
      return "/static/media/img/host-tiny.png"; 
     } else if(type == "vtserver") { 
      return "/static/media/img/server-tiny.png"; 
     } else { 
      return "/static/media/img/inactive.png"; 
     } 
    }) 
    .def("i", -1) 
    .width(20) 
    .height(20) 
    .fillStyle(function (d) { 
    if (this.i() == this.index) 
     return "brown"; 
     type = get_node_type(d); 
     if(type == "openflow") { 
      return "#999999"; 
     } else if(type == "planetlab") { 
      return "#333333"; 
     } else if(type == "vtserver") { 
      return "#006699"; 
     } else { 
      return "#CCCCCC"; 
     } 
    }/*function(d) { 
     if (this.i() == this.index) { 
      return "brown"; 
     } 
    if(get_node_type(d)=="openflow") 
      return "#999999"; 
    else 
     return "#CCCCCC"; 
    }*/) 
    .strokeStyle(function(d) { 
     /* if any ports are selected */ 
     if($(":checkbox:checked.node_id_"+d.nodeValue).length) { 
      return "#990000"; 
     } 
     return this.fillStyle().darker(); 
    }) 
    .cursor("pointer") 
// .title(function(d) d.nodeName) 
    .event("mousedown", pv.Behavior.drag()) 
    .event("mouseover", function(d) { 
//  pv.Behavior.tipsy({ gravity: "w", fade: true }) 
     /* display info on the selected node in the div */ 
     type = get_node_type(d); 
     desc = "Unknown" 
     if(type == "openflow") { 
      desc = "OpenFlow switch"; 
     } else if(type == "planetlab") { 
      desc = "PlanetLab node"; 
     } else if(type == "vtserver") { 
      desc = "Virtualized server"; 
     } 
     tooltip.show(get_node_info_formated(d)); 

     $("#selected_node_info").html("Selected " + desc + ": " + d.nodeName); 
     $("#selected_node_info").show(); 
     /* store the info about the selected node and highlight it */ 
     this.i(this.index); 
    }) 
    .event("click", function(d) { 
     type = get_node_type(d); 
     if(type == "openflow") { 
     clickSwitchOrLink(d); 
     } else if(type == "planetlab") { 
      return; 
     } else if(type == "vtserver") { 
      clickServer(d); 
     } 
    }) 
    .event("mouseout", function() this.i(-1)) 
    .event("mouseout", function() { 
      tooltip.hide(); 
     }) 
    .event("drag", force) 
    //.anchor("bottom").add(pv.Label).text(function(d) d.nodeName); 

vis.render(); 

</script> 

<div style="border:1px solid #CCCCCC;padding:0px;overflow:hidden;margin-bottom:20px;"> 
<div id="selected_node_info" style="height:14px;background-color:#DDDDDD;">Tip: Move cursor over the icons to get extra information...</div> 

<div id="target"> 
</div> 
<div style="width:100%;text-align:right;padding-top:2px;margin-top:2px;background-color: #333333"> 

    <a href="#" onClick="return zoomIn(0.25)"/><img src="/static/media/img/zoomin.png" style="height:16px;text-align:middle"/></a>&nbsp; 
    <a href="#" onClick="return zoomOut(0.5)"/><img src="/static/media/img/zoomout.png" style="height:16px;"/></a>&nbsp; 
    <a href="#" onClick="return zoomReset()"/><img src="/static/media/img/zoom.png" style="height:16px;"/></a>&nbsp; 
</div> 
</div> 
+0

은 추가로 닫는'script' 태그입니다. protovis 물건에 오타가 있기 전에? – scunliffe

+0

오류의 유일한 코드를 게시해야합니다. 어떻게 그러한 긴 코드를 추적 할 수 있습니까? – Lion

+0

의미가 무엇인지 알 수없는 경우 전체 오류 메시지를 축 어적으로 게시하십시오. – bdares

답변

0

스크립트 형식의 텍스트/자바 스크립트 그것은 IE 8 (내가 의심 다른 브라우저) 완전히 관련 스크립트 블록의 내용을 무시하게됩니다. 유효한 MIME 타입이 아니므로 오류가 있어야합니다 무시 된 스크립트에서 선언되거나 초기화 된 식별자에 액세스하려는 topology.js 또는 다른 페이지에서 오는 메시지

IE의 오류 메시지에는 행 번호가 붙습니다. 적절한 배치 된 주석을 사용하여 참조하는 스크립트 또는 HTML 파일의 위치를 ​​식별하십시오.

+0

정말입니까? TypeError 예외는 이런 종류의 오류처럼 들리지 않습니다. 제공된 예제의 맥락에서 JavaScript를 실행하는 것은 의문이지만 오류는 일치하지 않습니다. –

+0

고마워 :) 내 고문실의 컴퓨터에서 웹을 사용해 볼 때만 오류 메시지가 표시됩니다. 다른 컴퓨터 (IE, Crome, ...)는 정상입니다. 지도 교수가 퇴근 후 자세한 오류를 게시 할 것입니다. – jaeyong