Question

使用最初由prefuse构建的the latest Flare build，我试图获得一个缩进字段，就像在Layouts here中看到的那样。我正在处理从Google Firebase中提取的对象列表。虽然我可以将它们放在图表上并且比较一个和其他值，但我无法找到不同布局的说明。我即将研究文档，但我想知道是否还有其他内容我可以参考。

编辑： http://flare.prefuse.org/api/flare/vis/operator/layout/Layout.html我在这里找到了一般布局。但是，除非我使用AxisLayout，否则我只能显示1个或2个圆圈。

作为参考，我从firebase获取的数据是这样的。

一组对象。每个对象都有属性名称，销售，日期，活动等。

我希望它像上面的示例一样，并在每个圆圈中显示项目名称。然后，当用户点击该圆圈时，他就能够显示该项目的属性。

编辑：我能够找到一篇关于它的文章，但是在围绕他的设置格式构建我的数据数小时后，我无法完全模拟它。 http://simon.oconnorlamb.com/ria/2012/03/visualising-data-with-flare/

编辑：详细说明：

当我从Google Firebase的json列表中提取时，我会对其进行解析，以便将项目放在可引用的类别中。所有这些都进入一个数组来模拟我上面链接的教程。我试图尽可能地模拟结构。

private function handleDataRead(e:DatabaseEvent):void 
    {
        var trueDataArray:Array = new Array();

        //Extract manufacturers.
        var manufacturers:Vector.<String> = new Vector.<String>();
        for each (var item:Object in e.data)
        {
            if (manufacturers.indexOf(item.Manufacturer) == -1)
            {
                manufacturers.push(item.Manufacturer);
                //Example:  {type:'Manufacturer',id:'0',name:'Company A'}
                trueDataArray.push( {type:'manufacturer',
                id:manufacturers.indexOf(item.Manufacturer).toString(),
                name:item.Manufacturer});
            }
        }

        //Extract Item Name
        var itemNames:Vector.<String> = new Vector.<String>();
        for each (var item:Object in e.data)
        {
            if (itemNames.indexOf(item.ItemName) == -1)
            {
                itemNames.push(item.ItemName);
                var idValue:String = new String(itemNames.indexOf(item.ItemName) + (manufacturers.length - 1) +1);
                trueDataArray.push( {type:'item',
                id:idValue,
                name:item.ItemName,
                manufacturer:manufacturers.indexOf(item.Manufacturer).toString()} );
            }
        }


        //Extract property 1
        var mlCount:Vector.<int> = new Vector.<int>();
        for each (var item:Object in e.data)
        {
            if (item.hasOwnProperty("ML"))
            {
                if (mlCount.indexOf(item.ML) == -1)
                {
                    mlCount.push(item.ML);
                    var idValue:String = new String(mlCount.indexOf(item.ML) + (itemNames.length - 1) + (manufacturers.length - 1) +1);
                    trueDataArray.push({type:'mL',
                    id:idValue,
                    name:(item.ML as int).toString(),
                    item:itemNames.indexOf(item.ItemName).toString()});
                }
            }               
        }

        //Extract another property 
        var mgCount:Vector.<int> = new Vector.<int>();
        for each (var item:Object in e.data)
        {
            if (item.hasOwnProperty("MG"))
            {
                if (mgCount.indexOf(item.MG) == -1)
                {
                    mgCount.push(item.MG);
                    var idValue:String = new String(mgCount.indexOf(item.MG) + mlCount.indexOf(item.ML) + (itemNames.length - 1) + (manufacturers.length - 1) +1);
                    trueDataArray.push({type:'mG',
                    id:idValue,
                    name:(item.MG as int).toString(),
                    mL:mlCount.indexOf(item.ML).toString()});
                }
            }

        }

结果如下所示。

[
   {
      "name":"Company A",
      "type":"manufacturer",
      "id":"0"
   },
   {
      "name":"Company B",
      "type":"manufacturer",
      "id":"1"
   },
   {
      "name":"Company C",
      "type":"manufacturer",
      "id":"2"
   },
   {
      "name":"Company D",
      "type":"manufacturer",
      "id":"3"
   },
   {
      "name":"Company E",
      "type":"manufacturer",
      "id":"4"
   },
   {
      "type":"manufacturer",
      "id":"5"
   },
... //So on
   {
      "manufacturer":"0",
      "name":"Item Name 1",
      "type":"item",
      "id":"18"
   },
   {
      "manufacturer":"0",
      "name":"Item Name 2",
      "type":"item",
      "id":"19"
   },
   {
      "manufacturer":"0",
      "name":"Item Name 3",
      "type":"item",
      "id":"20"
   },
   {
      "manufacturer":"0",
      "name":"Item Name 4",
      "type":"item",
      "id":"21"
 ...//So on
   {
      "name":"60",
      "item":"0",
      "type":"mL",
      "id":"195"
   },
   {
      "name":"100",
      "item":"5",
      "type":"mL",
      "id":"196"
   },
   {
      "name":"120",
      "item":"36",
      "type":"mL",
      "id":"197"
   },
   {
      "name":"30",
      "item":"100",
      "type":"mL",
      "id":"198"
   }
   ...//and so forth
]

当我将此传递给我的函数以创建节点和边缘时（我再次基于上面链接中的博客）

    public function buildTree(arr:Array):Data
    {
        var d:Data = new Data(true);
        //Keyed lookup for easy edge addition in step 2
        var nodeLookup:Object = {};
        var row:Object;
        var ns:NodeSprite;
        //Step 1: Add all rows of data;
        for each(row in arr){
            ns = d.addNode(row);
            nodeLookup[row.id] = ns;
        }
        //Step 2: Add edges
        for each(ns in d.nodes){
            if(ns.data.hasOwnProperty('manufacturer')){
                d.addEdgeFor(nodeLookup[ns.data.manufacturer],ns);
            }
            else if(ns.data.hasOwnProperty('item')){
                d.addEdgeFor(nodeLookup[ns.data.item],ns);
            }
            else if(ns.data.hasOwnProperty('mL')){
                d.addEdgeFor(nodeLookup[ns.data.mL],ns);
            }
        }
        return d;
    }

并构建它

        data = buildTree(trueDataArray);
        sourceTree = new ItemVisualisation(data);


        sourceTree.bounds = new Rectangle(10, 10, 550, 550);
        sourceTree.x = 20;
        sourceTree.y = 20;
        addChild(sourceTree);

        sourceTree.operators.add(new IndentedTreeLayout());
        sourceTree.operators.add(new ShapeEncoder("data.type"));
        sourceTree.operators.add(new ColorEncoder("data.type", Data.NODES, "lineColor", ScaleType.CATEGORIES));
        sourceTree.data.nodes.setProperties({fillColor:0, lineWidth:2});
        sourceTree.update();

我得到以下......

我差点把它弄下来，但我不知道自己做错了什么。一切似乎都应该如此关系。

编辑：似乎节点可能正确地相互链接，但这不是我想要的布局。我也无法使用任何其他布局。

Answer 1

trueDataArray.push({type:'root', id:0, name:'rootname'});

我能够通过将所有内容绑定到1个节点来解决此问题。我在列出超出两个步骤的任何内容时遇到了一些麻烦，但这超出了我的项目要求。

Flare ItemVisualisation

1 个答案: