如何使用Underscore.Burrow可视化动态存储数据的子树结构?

时间:2019-05-03 12:33:35

标签: d3.js underscore.js blockchain

我想使用D3显示容器-托盘-包装-产品的层次结构。并在其中使用了underscore.burrow功能来嵌套任意深度的数据。数据已从区块链(MetaCoin-合约)中获取

function newFun() {
        MetaCoin.deployed().then(function (instance) {  
            instance.getDatafromBC.call(gid1).then(function (v) {  //function call 
                if (flg.length == 0) {  //flg is the no. of levels in the heirarchy
                    flg = v[6];
                }
                var nd   = new Array();
                nd.id    = v[0].c;
                nd.nodes = v[5].c;
                nd.flag  = v[6];
         flatData = Array.prototype.concat.apply([nd],[flatData]);  // input data from Blockchain
                console.log(flatData);
                gid1 = v[5].c;
                if (v[5].c == 0) {
                   nd.nodes = null;

                   if (flg == 3) {   
               /*flg=3, points out final level (product), 
                 flg=2 second last level (package),
                 flg=1 second level (pallette),
                 flg=0 top level (container)*/
                   document.getElementById("sh").style.display = "none";
                   document.getElementById("chart").style.display = "block";
                   document.getElementById("drop").style.display = "none";
                   document.getElementById("hint").style.display = "none";
                   document.getElementById("getprod").style.display = "none";
                   App.treeHierarchy(flatData);
                    }
                    if (flg == 2 || flg == 1 || flg == 0) {
                        childFunction(flatData, flg, gid);  //Function for searching Child of each ancestor or node. 
                    }
                } else {
                    newFun();
                }
            });
        }).catch(function (e) { });
    } //newFun

D3用于数据可视化

var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" +
         margin.left + "," + margin.top + ")");
        var treeData = _.burrow(flatData);  // using _.burrow() for nesting       
        root = d3.hierarchy(treeData, function (d) {
        return d.children;
    });

[Container becomes the root and all others becomes its only child. This makes no sense while a container becomes the ancestor of pallette, pallette becomes the ancestor of package, and package become the ancestor of product(Container->Pallette->Package->Product).

This is the right structure of the tree. But this logic didn't allow to include nest data of arbitary depth. That's why I have turned into burrow. But still I am facing problems on it.

0 个答案:

没有答案