javascript - Javascript InfoVis Spacetree单个节点样式

我是使用JavaScript编码的新手-有人可以用InfoVis Spacetree帮助我吗？我正在尝试将某个级别的节点的宽度和高度设置为小于其余部分。好像我把它放在数据中:{}，但是当我尝试data:{"$height":"30"}时，它弄糟了整个树...

最佳答案

我这样做的方法是将一些信息放入这些特殊节点的数据数组中，然后在绘制时将仅在这些节点上进行修改。

数据:

var json =
{
    'id':'id0.0',
    'name':'Root',
    'data':
    {
        'mytype':'1'
    },

    'children':
    [
        {
            'id':'id1.0',
            'name':'Node 1.0',
            'data':
            {
                'mytype':'2'
            },

            'children':
            [
                {
                    'id':'id2.0',
                    'name':'Node 2.0'
                },

                {
                    'id':'id2.1',
                    'name':'Node 2.1'
                },

                {
                    'id':'id2.2',
                    'name':'Node 2.2'
                }
            ]
        }
    ]
};

因此，您可以看到某个节点有一个名为 mytype 的数据元素，您必须在绘制树时注意这些元素。为此，您必须在onBeforePlotNode 函数上实现。此方法对于在绘制节点之前立即更改节点样式很有用。

这是SpaceTree创建的代码，它将处理您的特殊节点:

myTree = new $jit.ST({
    //id of viz container element
    injectInto: 'MyGraph',
    orientation: 'top',
    duration: 200,
    transition: $jit.Trans.Quart.easeInOut,
    levelDistance: 50,


    //enable panning
    Navigation:
    {
      enable:true,
      panning:true,
      zooming:20
    },


    //set node and edge styles
    //set overridable=true for styling individual
    //nodes or edges
    Node: {
        overridable: true,
        autoWidth: true,
        autoHeight: true,
        type: 'rectangle'
    },

    Edge: {
        type: 'bezier',
        overridable: true
    },


    onBeforePlotNode: function(node)
    {
        //if(node.data.class == 'node')
        if(node.data.mytype == '2')
        {
            node.data.$height = 60;
        }
    },
});

您可以看到OnBeforePlotNode正在查看该节点的数据，以查看其是否特殊。然后，您只能修改这些节点。