我遇到 TypeError Object does not support this property of method msg on IE8.
我正在使用 javascript 的 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>
<a href="#" onClick="return zoomOut(0.5)"/><img src="/static/media/img/zoomout.png" style="height:16px;"/></a>
<a href="#" onClick="return zoomReset()"/><img src="/static/media/img/zoom.png" style="height:16px;"/></a>
</div>
</div>