如果同一页面上有多个图形，则标签与节点分离

Question

<style type="text/css">
   #container {***strong text***
   /*width: auto;*/
   height: auto;
   margin:0 auto;
   position:relative;
   }
   #center-container {
   /*width:770px;*/
   left:200px;
   background-color:#FFF;
   color:#ccc;
   width: 100%;
   }
   #infovis {
   position:center;
   width:auto;
   margin:auto;
   height: 800px !important;
   overflow-y:hidden !important;
   }
   #infovis-canvas,#info-canvas
   {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 1078px;
   height: 800px;
   background: white;
   }
   #info {
   position:center;
   width:auto;
   height: 800px !important;
   margin:auto;
   overflow-y:hidden !important;
   }
   #NetworkGraphView {
   position: center;
   width:100%;
   height: 100%;
   margin: auto;
   overflow: hidden !important;
   }
   .chartbar{
   text-align: center;
   display: table-cell;
   vertical-align: middle;
   height: 34px;
   }
   .chartbar p {
   display: inline-block;
   vertical-align: top;
   font-size: 10px;
   margin: 0px 5px 0px 0px;
   float: right;
   }
   .searchSteps{
   float: right;
   }
   .infobar{
   margin-right: 0px;
   margin-left: 100px;
   text-align: center;
   }
</style>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit-yc.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit.js"></script>
<link type="text/css" href="<?php echo BASEURL; ?>app/webroot/jitcharts/css/base.css" rel="stylesheet" />
<link type="text/css" href="<?php echo BASEURL; ?>app/webroot/jitcharts/css/Spacetree.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit-yc.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/excanvas.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/d3.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/html2canvas.js"></script>
<script language="javascript" type="text/javascript">
   var approve_counter = 0;
   var pending_counter = 0;
   var flag = 0;
   var fd = '';

   function traverse(arr) {
        var len = arr.length;
        for(var i=0; i < len; i++) {
            $jit.json.each(arr[i], function(n) {
                n.data.$orn = arr[i]['status'];
                n.data.$shape = arr[i]['shape'];
                n.data.$S_status = arr[i]['S_status'];
            });
            traverse(arr[i].children);
        }
   }

   var labelType, useGradients, nativeTextSupport, animate;

   (function() {
    var ua = navigator.userAgent,
    iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
    typeOfCanvas = typeof HTMLCanvasElement,
    nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
    textSupport = nativeCanvasSupport
    && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
    labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
    nativeTextSupport = labelType == 'Native';
    useGradients = nativeCanvasSupport;
    animate = !(iStuff || !nativeCanvasSupport);
   })();

   var Log = {
    elem: false,
    write: function(text){
        if (!this.elem)
        this.elem = document.getElementById('log');
        this.elem.innerHTML = text;
        this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
    }
   };

   function init(){
    //init data
    var json = {
        id: "<?php echo $BatchNo . ', ' . $StepName; ?>",
        name: "<?php
      if ($gtype == 'buffer') {
      echo $BatchNo . ': ' . $bufferName;
      } else {
      echo $BatchNo . ', ' . $StepName;
      }
      ?>",
   data: {},
   children: [<?php echo $str; ?>]
   };

   var arr = json.children, len = arr.length;
   traverse(arr);
   var normal = $jit.id('s-normal');


   $j(document).ready(function() {

   });

   function networkgraph() {
   fd = new $jit.ForceDirected({  
   injectInto: 'infovis', 
   iterations: 200,  
   levelDistance: 130,  
   withLabels:true,
   Navigation: {  
    enable: true,  
    type: 'Native',  
    panning: 'avoid nodes',  
    zooming: 10 
   },  
   Label:{
    size: 4,
    style: 'bold',
    color: '#23A4FF',  
   },
   Node: {  
    overridable: false,  
    type: 'rectangle',  
    color: 'Blue',
    width:10,
    height:10,  
    dim: 3,  
    lineWidth: 1,  
    transform: true,  
    align: "center",  
    angularWidth:1,  
   }, 
   Edge:{  
    overridable: true,
    type: 'line',  //'hyperline'  
    color: '#23A4FF',  
    lineWidth: 1  
   },  

   Events:{  
    enable: true,  
    type: 'Native', 
    enableForEdges: true, 
    onMouseEnter: function() {  
      fd.canvas.getElement().style.cursor = 'move';  
    },  
    onMouseLeave: function() {  
      fd.canvas.getElement().style.cursor = '';  
    },  
    onDragMove: function(node, eventInfo, e) {  
      var pos = eventInfo.getPos();  
      node.pos.setc(pos.x, pos.y);  
      fd.plot();  
    },  
    onTouchMove: function(node, eventInfo, e) {  
      $jit.util.event.stop(e); //stop default touchmove event  
      this.onDragMove(node, eventInfo, e);  
    },
    onClick: function (node, eventInfo, e){ 
        if (!node) return;
        if (node.nodeFrom && node.nodeTo) {
           if(node.selected){
              node.setDataset('current', {  
                lineWidth: 1,  
                color: '#23a4ff',
              });
              node.selected = false;
           }else{
              node.setDataset('current', {  
                lineWidth: 4,  
                color: '#ff0000'  
              });
              node.selected = true;
           }
        } else {
            if(!node.selected) {  
              node.selected = true;  
              node.setData('dim', 3, 'end');  
              node.eachAdjacency(function(adj) {  
                adj.setDataset('current', {  
                  lineWidth: 4,  
                  color: '#ff0000'  
                });
                adj.selected=true;
              });  
            } else {  
              delete node.selected; 
              node.setData('dim', 7, 'end');  
              node.eachAdjacency(function(adj) {  
                adj.setDataset('current', {  
                  lineWidth: 1,  
                  color: '#23a4ff',
                });
                adj.selected=false;
              });   
            }  
        }
        fd.fx.animate({  
          modes: ['node-property:dim','edge-property:lineWidth:color'],  
          duration: 5 
        });  
    }
   },  
   onCreateLabel: function(label, node){ 
    console.log(label);
    console.log(node);
    console.log(node.id);
    label.id = node.id;  
    label.innerHTML = node.name;  

    var style = label.style;  
    style.color = "#ff0000";  
    <?php if ($gtype != 'buffer') {?>
      if(flag==0){
           Selected_batch_status = '<?php echo $Selected_batch_status;?>'
          if(Selected_batch_status == 'approved'){
              style.color = '#333';
              approve_counter = approve_counter + 1;

          }else{
              style.color = '#ff0000';
              pending_counter = pending_counter + 1;
          }
          flag=1;
        }else{
            if(node.data.$S_status=='approved'){
              style.color = '#333';
              approve_counter = approve_counter + 1;
            }else if(node.data.$S_status == 'no record'){
              style.color = '#00F';
            }else{
              style.color = '#ff0000';
              pending_counter = pending_counter + 1;
            }
        }
        <?php }
      else{
      ?>
        style.color = '#333';            
        <?php }?>
        style.fontSize = '11px';
    //    style.background = 'lightgreen';
        style.cursor = 'pointer';
        style.textAlign= 'center';
        style.paddingTop = '5px';
   },
   onBeforePlotNode: function(node){
    function setLabelScaling() {
        var x = fd.canvas.scaleOffsetX,
        y = fd.canvas.scaleOffsetY;
        $j(".node").css("-moz-transform", "scale(" + x +"," +  y + ")");
        $j(".node").css("-webkit-transform", "scale(" + x +"," + y + ")");
        $j(".node").css("-ms-transform", "scale(" + x +"," +  y + ")");
        $j(".node").css("-o-transform", "scale(" + x +"," +  y + ")");
    }
    setLabelScaling();
    if(node.data.$shape=='circle') {
        node.data.$type = "circle";
        node.data.$radius = "50";
        node.data.$color = "#990000";
    }
    if (node.selected) {
        node.data.$color = "#990000";
        node.data.$radius = "50";
        node.Label.style.color = "#990000";
    }
    else {
        if(node.data.$shape !='circle') {
        delete node.data.$color;
        }
        if(!node.anySubnode("exist") && node.data.$shape !='circle') {
            var count = 0;
            node.eachSubnode(function(n) { count++; });
        }
    }
   },
   // onPlaceLabel: function(domElement, node){  
   //       var style = domElement.style;  
   //       var left = parseInt(style.left);  
   //       var top = parseInt(style.top);  
   //       var w = domElement.offsetWidth;  
   //       style.left = (left - w / 2) + 'px';  
   //       style.top = (top + 10) + 'px';  
   //       style.display = '';  
   // }  
   });
   fd.loadJSON(json);  
   // compute positions incrementally and animate.  
   fd.computeIncremental({  
   iter: 40,  
   property: 'end',  
   onStep: function(perc){  

   },  
   onComplete: function(){  
   // Log.write('done');  
   fd.animate({  
   modes: ['linear'],  
   transition: $jit.Trans.Elastic.easeOut,  
   duration: 2500  
   });  
   }  
   });

   $j("#searchSteps").keyup(function(){
   var src_str = $j("#infovis").html();
   var term = $j("#searchSteps").val().toLowerCase();
   term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
   var pattern = new RegExp("("+term+")", "gi");
   src_str = src_str.replace(pattern, "<mark>$1</mark>");
   src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
   $j("#infovis").html(src_str);

   /*$jit.Graph.Util.eachNode(fd.graph, function(node) { 
   if(node.name.toLowerCase().indexOf($j("#searchSteps").val().toLowerCase()) > 0){
   alert("Hello");

   //  fd.graph.Label.color="#FFFF00 !important";
   //  $jit.Graph.Util.labels.getLabel(node.id).backgroud = 'red';
   // $j("").css({"background-color": "yellow", "font-size": "200%"});
    console.log(fd.graph);
    // console.log('Mukesh');
   }
   });   */
   });               
   }

   function spacetree(){
   var st = new $jit.ST({
        constrained: false,
        levelsToShow: 100,
        injectInto: 'info',
        multitree: true,
        withLabels:true,
        duration: 400,
        transition: $jit.Trans.Quart.easeInOut,
        levelDistance: 50,
        siblingOffset: 20,
        subtreeOffset: 20,
    Node: {
        height: 60,
        width: 120,
        type: 'rectangle',
        color: '#ffd',
        overridable: true,
        CanvasStyles: {
        shadowColor: '#000',
        shadowBlur: 1
        }
    },
   Label:{
    size: 6,
    style: 'bold',
    color: '#23A4FF', 
    type:'Native' 
    },
    Edge: {
        type: 'line',
        overridable: true
    },
    Navigation: {
        enable: true,
        panning: true,
        zooming: 50
    },
    onCreateLabel: function(label, node){
        console.log(label);
        console.log(node);
        console.log(node.id);
        label.id = node.id;
        label.innerHTML = node.name;
        label.onclick = function(){
            return false;
        };
        var style = label.style;
        style.width = 100 + 'px';
        style.height = 50 + 'px';
        <?php if ($gtype != 'buffer') {?>
        if(flag==0){
            Selected_batch_status = '<?php echo $Selected_batch_status;?>'
            if(Selected_batch_status == 'approved'){
            style.color = '#333';
            approve_counter = approve_counter + 1;
        }else{
            style.color = '#ff0000';
            pending_counter = pending_counter + 1;
        }
        flag=1;
        }else{
        if(node.data.$S_status=='approved'){
            style.color = '#333';
            approve_counter = approve_counter + 1;
        }else if(node.data.$S_status == 'no record'){
        style.color = '#00F';

        }else{
            style.color = '#ff0000';
            pending_counter = pending_counter + 1;
        }
        }
        <?php }else{
      ?>
        style.color = '#333';            
        <?php }?>
        style.fontSize = '0.9em';
        style.textAlign= 'center';
        style.paddingTop = '7.5px';
    },
    onBeforePlotNode: function(node){
        function setLabelScaling() {
            var x = st.canvas.scaleOffsetX,
            y = st.canvas.scaleOffsetY;
            $j(".node").css("-moz-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-webkit-transform", "scale(" + x +"," + y + ")");
            $j(".node").css("-ms-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-o-transform", "scale(" + x +"," +  y + ")");
        }
        // setLabelScaling();
        if(node.data.$shape=='circle') {
            node.data.$color = "#0ff";
        }
        if (node.selected) {
            node.data.$color = "#ffa";
            node.Label.style.color = "#333";
        }
        else {
            if(node.data.$shape !='circle') {
                delete node.data.$color;
            }
            if(!node.anySubnode("exist") && node.data.$shape !='circle') {
                var count = 0;
                node.eachSubnode(function(n) { count++; });
            }
        }
    },
    onMouseWheel: function(){
        function setLabelScaling() {
            var x = st.canvas.scaleOffsetX,
            y = st.canvas.scaleOffsetY;
            $j(".node").css("-moz-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-webkit-transform", "scale(" + x +"," + y + ")");
            $j(".node").css("-ms-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-o-transform", "scale(" + x +"," +  y + ")");
        }
        // setLabelScaling();
    },
    onBeforePlotLine: function(adj){
        if (adj.nodeFrom.selected && adj.nodeTo.selected) {
            adj.data.$color = "#eed";
            adj.data.$lineWidth = 3;
        }
        else {
            delete adj.data.$color;
            delete adj.data.$lineWidth;
        }
    }
   });
   st.loadJSON(json);
   //compute node positions and layout
   st.compute('end');
   st.select(st.root);
   }


   $j(document).ready(function(){


   spacetree();
   networkgraph();
   $j("#info").show();
   $j("#infovis").hide();

   $j("#ShowSpacetree").hide();
   $j(".searchSteps").hide();

   $j("#Shownetwork").click(function () {
   $j("#info").hide();
   $j("#infovis").show();
   $j("#Shownetwork").hide();
   $j("#ShowSpacetree").show();
   $j(".searchSteps").show();

   var element = $j("#infovis"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Networkgrap.jpeg").attr("href", newData);
   });
   } );

   $j("#ShowSpacetree").click(function () {
   $j("#info").show();
   $j("#infovis").hide();
   $j("#Shownetwork").show();
   $j("#ShowSpacetree").hide();
   $j(".searchSteps").hide();
   var element = $j("#info"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
     getCanvas.fillStyle = "blue";
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Spacetree.jpeg").attr("href", newData);
   });
   } );

   $j("#infovis").click(function () {
   var element = $j("#infovis"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
    getCanvas.fillStyle = "blue";
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Networkgrap.jpeg").attr("href", newData);
   });
   } );

   $j("#info").click(function () {
   var element = $j("#info"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
    getCanvas.fillStyle = "blue";
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Spacetree.jpeg").attr("href", newData);
   });
   } );



   });

   var total = pending_counter + approve_counter;
   var per_approved = Math.round((approve_counter/total)*100);
   var str = '(Current Lot Tree is '+per_approved+'% approved)';
   $j('#insight').html(str);

   }
   setTimeout("init();", 500);


</script>
<div id="chart1">
   <?php if ($gtype != 'buffer'){?>
   <div class="row container">
      <div class="col-lg-12 infobar">
         <div class="col-lg-5">
            <div class="input-group searchSteps">
               <input type="text" class="form-control" id="searchSteps" placeholder="Search">
               <span class="input-group-addon"><i class="fa fa-search"></i></span>
            </div>
         </div>
         <div class=" chartbar col-lg-7">
            <p id="insight"></p>
            <p style="color: #00F">*Blue = Not Recorded</p>
            <p style=" color: black">*Black = Approved</p>
            <p style=" color: red">*Red = Not Approved</p>
         </div>
      </div>
   </div>
   <?php } ?>     
   <div class="row">
      <div class="col-lg-11 col-md-8">
         <div id="container">
            <div id="center-container">
               <div id="info">  
               </div>
               <div id="infovis">  
               </div>
               <!-- <div id="info"></div>
                  <div id="infovis" hiddden></div> -->
            </div>
            <div id="log"></div>
         </div>
      </div>
      <div class="col-lg-1 col-md-4">
         <ul class="nav nav-stacked navbar-right">
            <li class="rpanel_item" id="Shownetwork" title="Show Network">
               <a aria-expanded="false"><i class="fa fa-2x fa-table"></i></a>
            </li>
            <li class="rpanel_item" id="ShowSpacetree" title="Show Space tree">
               <a  aria-expanded="true"><i class="fa fa-share-alt fa-2x"></i></a>
            </li>
            <li class="rpanel_item" title="download chart">
               <a id="downloadimage">
               <i class="fa fa-download fa-2x"></i>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div> 

我正在使用 JIT Graph 在可切换的'divs'中生成空间树和强制有向图，当切换到相应的div时，它会被填充。节点的数据来自后端 从活动图表中的其他标签切换到一个图表时会受到干扰 如何为两个图形生成不同的标签。