1

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>&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>
4

1 に答える 1

0

スクリプトタイプtext/javascript + protovis "は有効なMIMEタイプではありません。これにより、IE 8(および私が疑う他のブラウザー)は関連するスクリプトブロックのコンテンツを完全に無視するため、エラーはtopology.jsまたは無視されたスクリプトで宣言または初期化された識別子にアクセスしようとしているページ内の他の何か。

IEのエラーメッセージには行番号が付いています。それが何であるか、どこから来たのかをアドバイスし、適切なコメントを付けて、スクリプトまたはHTMLファイルのどこを参照しているかを特定してください。

于 2012-07-30T03:07:52.267 に答える