交互式力导向图

时间:2015-08-10 09:13:29

标签: d3.js force-layout

我正在研究一个强制定向的节点和边缘布局。在我的图中,每个节点都属于一个类别。有3种节点。
1.Organization 2.Person 3.Country

所以每个人都可以属于一个组织或国家。所以有边缘就像

person-->Organization  
person-->Country  
person-->person  
Country --> Organization and so on....  

强制布局已准备就绪。但我的新要求是,如果每个类别都有复选框,如果我点击类别复选框,那么我不应该看到属于该类别的那些节点。

因此,如果单击“组织”复选框,则所有组织节点都应消失,并且该节点的边缘应自行扩展。

据说

Person 1-->organization 1-->Person 2  

如果单击组织复选框,图表应重新组织,如...

Person 1-->Person 2  

organization 1-->country 1-->organization 2  

并点击国家/地区复选框,它应该像

organization 1-->organization 2  

是否有任何交互式强制布局来实现此目的。任何链接和想法都很有用。我的强制布局类似于http://bl.ocks.org/mbostock/4062045

我的示例JSON格式如下所示

{
    "edges": [
    {
        "label": "person -> org",
        "source": 37,
        "target": 52,
        "id": "154",
        "size": 4
    },
    {
        "label": "country -> org",
        "source": 24,
        "target": 74,
        "id": "29",
        "size": 1
    }
],
    "nodes": [
    {
        "label": "Algeria",
        "id": "10009",
        "attributes": {
            "class": "country"
        },
        "size": 3.9024388790130615
    },
    {
        "label": "Foundation INTISAAR",
        "id": "5014",
        "attributes": {
            "class": "organization"
        },
        "size": 12.609755516052246
    },
    {
        "label": "Abdul rah man",
        "id": "5014",
        "attributes": {
            "class": "person"
        },
        "size": 5.609755516052246
    }
]
}

0 个答案:

没有答案