0

我正面临我正在使用的 Jit Infovis 的奇怪行为。我有两个不同的 html 文件,其中包含来自 Javascript 文件的加载 json 函数。该函数使用 infovis 库来显示来自 json 文件的超树映射。两个 html 文件都加载相同的 json 文件。

一个 html 文件已成功正确渲染地图。但另一个没有。它几乎正确地渲染了地图,但是在我调试它之后,我没有在根节点上进行迭代。然后,根节点在没有标签和可点击性的情况下变为非活动状态。

这是我正在使用的 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)
}

这可能是什么原因造成的?

4

1 回答 1

0

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

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

于 2013-10-30T10:12:35.743 回答