Actionscript 3 Flare项目可视化

使用prefuse最初构建的，我试图得到一个缩进字段，就像在布局中看到的一样。我正在处理从Google Firebase中提取的对象列表。虽然我可以把它们很好地放在一个图表上，比较一个值和其他值，但我找不到关于不同布局的说明。我正要研究这些文件，但我想知道是否还有其他我可以参考的东西

---

编辑： 我在这里找到了总体布局。但是，除非我做AxisLayout，否则我只能显示1或2个圆

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

[
   {
      "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
]

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

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

---

编辑：我能找到一篇关于它的文章，但在围绕他设定的格式构建了数小时的数据之后，我无法完全模仿它。

---

编辑：要进入详细信息：

当我从GoogleFirebase中提取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()});
                }
            }

        }

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

然后建造它

        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();

我得到了以下结论。。

我差点把它弄下来，但我不知道我做错了什么。在关系上，一切似乎都是正常的

---

编辑：似乎节点之间可以正确链接，但这不是我想要的布局。我也无法让任何其他布局工作

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

        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();

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