javascript - Infovis 未迭代根节点

Question

我遇到了我正在使用的 Jit Infovis 的奇怪行为。我有两个不同的 html 文件，其中包含来自 Javascript 文件的加载 json 函数。该函数使用 infovis 库显示 json 文件中的超 TreeMap 。两个 html 文件都加载相同的 json 文件。

一个 html 文件已成功正确渲染 map 。但另一位却没有。它几乎正确地渲染了 map ，但是在我调试它之后，我发现它没有迭代根节点。然后，根节点变得不活动，没有标签和可点击性。

这是我正在使用的js函数。

        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');
                        //I'm setting this based on the fact that ExCanvas provides text support for IE
                        //and that as of today iPhone/iPad current text support is lame
                        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 = (350 - this.elem.offsetWidth / 2) + 'px';
                        }
                    };



                    function init(slugParam, pageParam) {
                        var isFirst = true;
                        var isSetAsRoot = false;
                        // alert(slugParam+ " | "+pageParam);

                        var url = Routing.generate('trade_map_buyer_json', { slug : slugParam, page : pageParam });
                        //init data
                        $.getJSON(url, function (json) {
                            var type = 'Buyer';
                            //end
                            var infovis = document.getElementById('infovis');
                            infovis.style.align = "center";
                            infovis.innerHTML = '';
                            // infovis.innerHTML  = '<img align="center" id="gifloader" style="margin-left:50%; margin-top:50%" src="{{ asset('/bundles/jariffproject/frontend/images/preloader.gif') }}" width="30px" height="30px"/>'
                            var w = infovis.offsetWidth - 50, h = infovis.offsetHeight - 50;

                            url = url.replace("/json/", "/");
                            window.history.pushState("object or string", "Title", url);
                            //init Hypertree
                            var ht = new $jit.Hypertree({
                                //id of the visualization container
                                injectInto: 'infovis',
                                Navigation: {  
                                    enable: false,  
                                    panning: 'avoid nodes',  
                                },  
                                //canvas width and height
                                width: w,
                                height

    : h,
                            //Change node and edge styles such as
                            //color, width and dimensions.

                            Node: {
                                dim: 9,
                                overridable: true,
                                color: "#66FF33"
                            },
                        Tips: {  
                            enable: true,  
                            type: 'HTML',  
                            offsetX: 0,  
                            offsetY: 0,  
                            onShow: function(tip, node) {  
                                // dump(tip);
                                tip.innerHTML = "<div  style='background-color:#F8FFC9;text-align:center;border-radius:5px; padding:10px 10px;' class='node-tip'><p style='font-size:100%;font-weight:bold;'>"+node.name+"</p><p style='font-size:50%pt'>"+node.data.address+"</p></div>"; 
                            }     
                        },
                        Events: {  
                            enable: true,  
                            type: 'HTML',
                            onMouseEnter: function(node, eventInfo, e){
                                var nodeId = node.id;
                                var menu1 = [
                                {'set as Root':function(menuItem,menu) { 
                                    menu.hide();
                                    isSetAsRoot = true; 
                                    console.log(nodeId); 
                                    init(nodeId, 0);
                                }},
                                $.contextMenu.separator,
                                {'View details':function(menuItem,menu) { 
                                }}
                                ];
                                $('.node').contextMenu(menu1,{theme:'vista'});
                            } 
                        },  
                        Edge: {
                            lineWidth: 1,
                            color: "#52D5DE",
                            overridable: true,
                        },
                        onBeforePlotNode: function(node)
                        {
                            if (isFirst) {
                                console.log(node._depth);
                                var odd = isOdd(node._depth);
                                if (odd) {
                                    node.setData('color', "#66FF33"); // hijau (supplier)
                                } else {
                                    node.setData('color', "#FF3300"); // merah (buyer)
                                }
                                isFirst = false;
                            }
                        },
                        onPlotNode: function(node)
                        {
                            if (isSetAsRoot) {
                                var nodeInstance = node.getNode();
                                var nodeId = nodeInstance.id;
                                init(nodeId, 0); 
                                isSetAsRoot = false;
                            }
                        },
                        onBeforeCompute: function (domElement, node) {
                            var dot = ht.graph.getClosestNodeToOrigin("current");
                            type = isOdd(dot._depth) ? 'Supplier' : 'Buyer';
                        },
                        //Attach event handlers and add text to the
                        //labels. This method is only triggered on label
                        //creation
                        onCreateLabel: function (domElement, node) {
                            var odd = isOdd(node._depth);
                            if (odd) {
                                node.setData('color', "#66FF33"); // hijau (supplier)
                            } else {
                                node.setData('color', "#FF3300"); // merah (buyer)
                            }

                            domElement.innerHTML = node.name;
                            // if (node._depth == 1) {
                                console.log("|"+node.name+"|"+node._depth+"|");
                            // }
                            $jit.util.addEvent(domElement, 'click', function () {
                                ht.onClick(node.id, {
                                    onComplete: function () {
                                        console.log(node.id);
                                        ht.controller.onComplete(node);
                                    }
                                });
                            });

                        },

                        onPlaceLabel: function (domElement, node) {
                            var style = domElement.style;
                            style.display = '';
                            style.cursor = 'pointer';
                            if (node._depth <= 1) {
                                style.fontSize = "0.8em";
                                style.color = "#000";
                                style.fontWeight = "normal";

                            } else if (node._depth == 2) {
                                style.fontSize = "0.7em";
                                style.color = "#555";

                            } else {
                                style.display = 'none';
                            }

                            var left = parseInt(style.left);
                            var w = domElement.offsetWidth;
                            style.left = (left - w / 2) + 'px';
                        },

                        onComplete: function (node) {
                            var dot = ht.graph.getClosestNodeToOrigin("current");
                            console.log(dot._depth);
                            var connCount = dot.data.size;
                            var showingCount = '';
                            if (connCount != undefined) {
                                var pageParamInt = (parseInt(pageParam)+1) * 10;
                                var modulus = connCount%10;

                                showingCount = (pageParamInt - 9) + " - " + pageParamInt;

                                if (connCount -  (pageParamInt - 9) < 10) {
                                    showingCount = (pageParamInt - 10) + " - " + ((pageParamInt - 10) + modulus);
                                }
                            } else {
                                connCount = '0';
                                showingCount = 'No Connections Shown'
                            }

                        }
                    });
                    //load JSON data.
                    ht.loadJSON(json);

                    //compute positions and plot.
                    ht.refresh();
                    //end
                    ht.controller.onComplete();
                });
}

function isEven(n) 
{
   return isNumber(n) && (n % 2 == 0);
}

function isOdd(n)
{
   return isNumber(n) && (n % 2 == 1);
}
function isNumber(n)
{
   return n === parseFloat(n);
}

function processAjaxData(response, urlPath){
}

function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }
    out = out + "\n\n"

    console.log(out);

    // or, if you wanted to avoid alerts...

    var pre = document.createElement('pre');
    pre.innerHTML = out;
    document.body.appendChild(pre)
}

可能是什么原因造成的？

Answer 1

请检查是否有冲突id。基本上 infovis 通过 id 渲染每个节点。如果存在一个 DOM 元素与节点的一个 DOM 元素具有相同的 id。它会发生冲突并且不会渲染

您可以通过在节点上迭代 dom 元素来检查它。