D3.js append circle to the GROUP based on the JSON value - javascript

Here I'm getting json data as
{
"nodes": [{
"name": "Tomcat",
"comp_type": "tomcat_155:7077",
"id": "tomcat_155:7077",
"pie": true,
"url": "../images/component_icons/1424962275_f-server_128.svg",
"group": 1,
"fixed": true
}, {
"name": "lraj_155_Nov_3(MS SQL)",
"comp_type": "192.168.11.212:1433_Ba",
"id": "lraj_155_Nov_3(MS SQL)",
"pie": false,
"url": "../images/component_icons/1424962160_19.svg",
"group": 2,
"fixed": true
}, {
"name": "rajesh_window",
"comp_type": "192.234.11.116:1433_window",
"id": "rajesh_window",
"pie": false,
"url": "../images/component_icons/1424882359_database.svg",
"group": 3,
"fixed": true
}, {
"name": "shanker_ux_win_3(PS)",
"comp_type": "192.168.11.116:1433_window",
"pie": true,
"id": "shanker_ux_win_3(PS)",
"url": "../images/component_icons/1424882359_database.svg",
"group": 4,
"fixed": true
}],
"links": [{
"source": 1,
"target": 0,
"description": "windows flows",
"value": 1
}, {
"source": 2,
"description": "SQLMS(36.67%)",
"target": 0,
"value": 8
}, {
"source": 1,
"description": "",
"target": 0,
"value": 8
}, {
"source": 3,
"target": 2,
"description": "ctrix 6765",
"value": 1
}]
}
Each node contains PIE which is true or false.
So when i render d3 force layout, If PIE is true a circle have to append to group else no circle have to append.
Please help me out. Thanks in advance.


You can do this using a filter. For example, assuming that you append a g element for each datum and circles only for those for which pie == true:
d3.selectAll("g").data(json.nodes)
.enter().append("g")
.filter(function(d) { return d.pie; })
.append("circle");

Related

How to filter or delete parent node and make child node as parent node

I have a tree json, please check it below.
I want to delete parent node and make child node as parent node?
Or if I can is there any way to filter nodes from tree please look into below original json tree and expected json tree.
Original JSON IS
[
{
"Id": "224146",
"Text": "Node One",
"Depth": 0,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
]
},
{
"Id": "224135",
"Text": "Node two",
"Depth": 0,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
{
"Id": "224136",
"Text": "Client Summary",
"Depth": 1,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
{
"Id": "224137",
"Text": "Manager 1",
"Depth": 2,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
]
}
]
}
]
},
{
"Id": "224147",
"Text": "Node three",
"Depth": 0,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
]
}
]
Expected Value That I want IS.
Here I have remove Client Summary parent and make Manage 1 as parent.
[
{
"Id": "224146",
"Text": "Node one",
"Depth": 0,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
]
},
{
"Id": "224135",
"Text": "Node two",
"Depth": 0,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
{
"Id": "224137",
"Text": "Manager 1",
"Depth": 2,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
]
}
]
},
{
"Id": "224147",
"Text": "Node three",
"Depth": 0,
"IsSelected": false,
"IsExpanded": false,
"Nodes": [
]
}
]
I want this solution dynamically because this is a sample json that i have posted here thanks in advance.
Thanks
Kushal shah

You'll have to recursively traverse the whole hierarchy, and when you have a matching item, remove it from the array it is in, and insert at that position all the children items.
Here is a function that will perform such a node removal based on a given id.
function remove(arr, delId) {
const target = arr.findIndex(({Id}) => Id == delId);
if (target >= 0) {
arr.splice(target, 1, ...arr[target].Nodes);
} else {
arr.forEach(({Nodes}) => remove(Nodes, delId));
}
}
// demo
const data = [{"Id": "224146","Text": "Node One","Depth": 0,"IsSelected": false,"IsExpanded": false,"Nodes": []},{"Id": "224135","Text": "Node two","Depth": 0,"IsSelected": false,"IsExpanded": false,"Nodes": [{"Id": "224136","Text": "Client Summary","Depth": 1,"IsSelected": false,"IsExpanded": false,"Nodes": [{"Id": "224137","Text": "Manager 1","Depth": 2,"IsSelected": false,"IsExpanded": false,"Nodes": []}]}]},{"Id": "224147","Text": "Node three","Depth": 0,"IsSelected": false,"IsExpanded": false,"Nodes": []}];
remove(data, "224136");
console.log(data);

Checking Nesting of objects

There can two sets of objects
First can be a straight forward where is no children
const noChildObj = [{
"id": 1,
"label": ["Description"],
"lines": 1,
"type": "string",
"precision": 2,
"width": 167.8
}, {
"id": 2,
"label": ["Information", "Ratio"],
"lines": 2,
"type": "number",
"precision": 2,
"width": 167.8
}, {
"id": 3,
"label": ["Tracking", "Error"],
"lines": 2,
"type": "number",
"precision": 2,
"width": 167.8
}]
So,in this case, there is no child , so property 'width' is at the topmost layer.
Second is where nesting of objects occur
So each object in the array will have a child object
[{
"id": "257",
"label": [""],
"lines": 1,
"children": [{
"id": "Description",
"label": ["Dates"],
"lines": 1,
"type": "date",
"precision": null,
"width": 839
}]
}, {
"id": "258",
"label": ["Cumulative Return"],
"lines": 1,
"children": [{
"id": 12,
"label": ["Russell 1000 Value - Price Return"],
"lines": 1,
"type": "number",
"precision": 2,
"width": 839
}]
}]
Here each object has a child object where the property width exists
This nesting is not limited to just 1 level
It can go upto 4 levels
So my use case requires if the innermost child has width undefined or not
I do realise that through recursion , we can traverse and find out..
But is there any function which can do it in less lines of code..may be in lodash
Please help

Know only how to do with recursion:
const objArray = [{
"id": 1,
"label": ["Description"],
"lines": 1,
"type": "string",
"precision": 2,
"width": 167.8
}, {
"id": "257",
"label": [""],
"lines": 1,
"children": [{
"id": "Description",
"label": ["Dates"],
"lines": 1,
"type": "date",
"precision": null,
"width": 839
}]
}]
const getWidthDeep = (el) => el.children && el.children[0]
? getWidthDeep(el.children[0])
: el.width
const result = objArray.map(getWidthDeep)
console.log(result)

How to keep the previous position when expand and collapse group with cytoscape.js

I've been searching for a good topology layout javascript library for a long time. I learned many library D3, WebCola, and so on, and eventually I was deeply attracted to
cytoscape and its amazing extension cytoscape.js-expand-collapse
What I want is a javascript layout library, which can do a reasonable layout with a lot of nodes. The parent nodes contains children nodes, in other words, there is an inheritance relationship between the nodes.
This Demo is almost extactly what I need. The expanding and collapsing feature is really great.
And I create my demo base on the above demo. But, when expand a node and then collapse the node, all nodes on the graph are changed.
Initial graph
The state after expand and collapse node at first time
The state after expand and collapse node at second time
Obviously that's not my need. And I learn the original offial demo again. I find the elements values of demo has position on each data.
{"data":{"id":"nwtN_50c55b8c-3489-4c4e-8bea-6a1c1162ac9c"},"position":{"x":577.5410894097904,"y":612.5647477282114},"group":"nodes"}
I know if each data has reasonable coordinate, all nodes position will not be changed after expand and collapse some nodes.
The key point is that I don't know the coordinate and I can't set the initial coordinate for my nodes. I think the core algorithm of layout is to calculate the appropriate coordinate points for each point.
So, I can't set the initial coordinate for all nodes and I expect all nodes position are fixed , no matter expand and collpase any node. Is it possible?
The following is my demo.
document.addEventListener('DOMContentLoaded', function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {
var api = this.expandCollapse({
layoutBy: {
name: "cose-bilkent",
animate: "end",
randomize: false,
fit: false
},
fisheye: true,
animate: false,
undoable: false
});
api.collapseAll();
},
style: [{
selector: 'node',
style: {
'label': 'data(id)'
}
}],
elements: [{
"group": "nodes",
"data": {
"id": "n_0",
"name": "External Network"
}
}, {
"group": "nodes",
"data": {
"id": "n_4",
"name": "虚拟机网络",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "n_3",
"name": "VM Network 2",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_128",
"name": "bfcui-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_105",
"name": "bychen-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_93",
"name": "CE-bj",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_100",
"name": "changliu-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_67",
"name": "chaoma-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_83",
"name": "chenwang",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_68",
"name": "cwang-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_15",
"name": "gqpei-bj",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_1",
"name": "gwxu-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_118",
"name": "gyzhao-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_76",
"name": "hlli-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_18",
"name": "hwzhang-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_40",
"name": "hxqu-pc"
}
}, {
"group": "nodes",
"data": {
"id": "v_69",
"name": "hxwang-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_71",
"name": "jbshi-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_64",
"name": "jdai-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_16",
"name": "jfxiao-bj",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_78",
"name": "jhhou-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_91",
"name": "jjsun-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_17",
"name": "jppan-bj",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_45",
"name": "jqwang-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_50",
"name": "jxli-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_42",
"name": "jyyou-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_28",
"name": "jyzhou-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_46",
"name": "jzhao-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_19",
"name": "lfeng-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_65",
"name": "lhzhen-pc",
"parent": "group2"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_1",
"source": "n_0",
"target": "v_1"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_100",
"source": "n_0",
"target": "v_100"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_46",
"source": "n_0",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_64",
"source": "n_0",
"target": "v_64"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_65",
"source": "n_0",
"target": "v_65"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_67",
"source": "n_0",
"target": "v_67"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_69",
"source": "n_0",
"target": "v_69"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_71",
"source": "n_0",
"target": "v_71"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_76",
"source": "n_0",
"target": "v_76"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_78",
"source": "n_0",
"target": "v_78"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_83",
"source": "n_0",
"target": "v_83"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_91",
"source": "n_0",
"target": "v_91"
}
}, {
"data": {
"group": "edges",
"id": "v_1n_0",
"source": "v_1",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_1v_128",
"source": "v_1",
"target": "v_128"
}
}, {
"data": {
"group": "edges",
"id": "v_100n_0",
"source": "v_100",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_16",
"source": "v_118",
"target": "v_16"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_18",
"source": "v_118",
"target": "v_18"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_46",
"source": "v_118",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_67",
"source": "v_118",
"target": "v_67"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_69",
"source": "v_118",
"target": "v_69"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_71",
"source": "v_118",
"target": "v_71"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_78",
"source": "v_118",
"target": "v_78"
}
}, {
"data": {
"group": "edges",
"id": "v_128n_0",
"source": "v_128",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_1",
"source": "v_128",
"target": "v_1"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_105",
"source": "v_128",
"target": "v_105"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_46",
"source": "v_128",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_65",
"source": "v_128",
"target": "v_65"
}
}, {
"data": {
"group": "edges",
"id": "v_15n_0",
"source": "v_15",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_50v_40",
"source": "v_50",
"target": "v_40"
}
}, {
"data": {
"group": "edges",
"id": "v_50v_46",
"source": "v_50",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "v_50v_64",
"source": "v_50",
"target": "v_64"
}
}, {
"data": {
"group": "edges",
"id": "v_65v_19",
"source": "v_65",
"target": "v_19"
}
}, {
"data": {
"group": "edges",
"id": "v_65v_91",
"source": "v_65",
"target": "v_91"
}
}, {
"data": {
"group": "edges",
"id": "v_67n_0",
"source": "v_67",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_67v_100",
"source": "v_67",
"target": "v_100"
}
}, {
"data": {
"group": "edges",
"id": "v_67v_105",
"source": "v_67",
"target": "v_105"
}
}, {
"data": {
"group": "edges",
"id": "v_67v_42",
"source": "v_67",
"target": "v_42"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_16",
"source": "v_91",
"target": "v_16"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_18",
"source": "v_91",
"target": "v_18"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_28",
"source": "v_91",
"target": "v_28"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_45",
"source": "v_91",
"target": "v_45"
}
}, {
"group": "nodes",
"data": {
"id": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "group2"
}
}]
});
var api = cy.expandCollapse('get');
var beforeExpand = null;
cy.unbind('expandcollapse.beforeexpand');
cy.nodes().bind('expandcollapse.beforeexpand', function(event) {
if (beforeExpand == null)
beforeExpand = cy.elements().clone(); // save the graph before the first expand
}); // Triggered before a node is expanded
cy.unbind('expandcollapse.aftercollapse');
cy.nodes().bind('expandcollapse.aftercollapse', function(event) {
if(beforeExpand != null) {
cy.elements().remove();
cy.add(beforeExpand); // set the graph to original values
beforeExpand = null;
}
});
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
}
#cy {
z-index: 999;
width: 100%;
height: 100%;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape#3.1.0/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/cytoscape-cose-bilkent#4.0.0/cytoscape-cose-bilkent.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse#3.1.1/cytoscape-expand-collapse.js"></script>
<div id="cy"></div>
Finally, sum up what I need :
Init graph with some nodes, which may be expandable depending on a property like type. Nodes with type=1 are expandable and type=2 not.
All nodes do a reasonable layout, like layoutBy:{name:'cose-bilkent'}
When expand one node (eg : A), Send ajax request to get children nodes (eg: A1, A2, A3) and then layout children. The graph maybe need an appropriate adjustments. I hope it's a incremental layout, not a full re-layout.
When collapse the previous compond nodes (group A with A1,A2,A3), all nodes on the graph keep the previous position.
When expand the last group node (eg : A), the children nodes are also keep the previous position.
I think my requirement is very basic, but I can't find a demo to display this feature? Do I describe my requirement clearly ?
Can someone help me? Thanks in advance. Thanks very much.

What you are trying to do is not really efficient. You said yourself, that you don't know the coordinates of your nodes, so cytoscape doesn'know that either. But non the less, cose-blikent still positions the elements as good as possible. The position may change, but the structure stays the same. There is really no problem there that justifies the trouble and work you'd have to go through to.
If you really want to achieve this, i suppose you can do this within a specific event that has occured:
Code:
var nodes = cy.nodes();
var positions = [];
for (node in nodes) {
positions[node] = nodes[node].position(); // save the i'th nodes positions
}
and then after you collapse a parent and expand it again, you can set all the nodes positions that you stored before:
var nodes = cy.nodes();
for (node in nodes) {
nodes[node].position(positions[node]); // set x and y of node
}
Events:
cy.nodes().on("expandcollapse.beforecollapse", function(event) { var node = this; ... }) // Triggered before a node is collapsed
cy.nodes().on("expandcollapse.aftercollapse", function(event) { var node = this; ... }) // Triggered after a node is collapsed
cy.nodes().on("expandcollapse.beforeexpand", function(event) { var node = this; ... }) // Triggered before a node is expanded
cy.nodes().on("expandcollapse.afterexpand", function(event) { var node = this; ... }) // Triggered after a node is expanded
Edit:
var beforeExpand = null;
cy.unbind('expandcollapse.beforeexpand');
cy.nodes().bind('expandcollapse.beforeexpand', function(event) {
if (beforeExpand == null)
beforeExpand = cy.elements().clone(); // save the graph before the first expand
}); // Triggered before a node is expanded
cy.unbind('expandcollapse.aftercollapse');
cy.nodes().bind('expandcollapse.aftercollapse', function(event) {
if(beforeExpand != null) {
cy.elements().remove();
cy.add(beforeExpand); // set the graph to original values
beforeExpand = null;
}
}); // Triggered before a node is expanded
Edit:
Here is how you repair your demo:
change fit: false to fit: true
change your css for the cytoscape like in the following snippet
document.addEventListener('DOMContentLoaded', function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {
var api = this.expandCollapse({
layoutBy: {
name: "cose-bilkent",
animate: "end",
randomize: false,
fit: true // set this to true
},
fisheye: true,
animate: false,
undoable: false
});
api.collapseAll();
},
style: [{
selector: 'node',
style: {
'label': 'data(id)'
}
}],
elements: [{
"group": "nodes",
"data": {
"id": "n_0",
"name": "External Network"
}
}, {
"group": "nodes",
"data": {
"id": "n_4",
"name": "虚拟机网络",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "n_3",
"name": "VM Network 2",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_128",
"name": "bfcui-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_105",
"name": "bychen-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_93",
"name": "CE-bj",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_100",
"name": "changliu-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_67",
"name": "chaoma-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_83",
"name": "chenwang",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_68",
"name": "cwang-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_15",
"name": "gqpei-bj",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_1",
"name": "gwxu-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_118",
"name": "gyzhao-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_76",
"name": "hlli-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_18",
"name": "hwzhang-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_40",
"name": "hxqu-pc"
}
}, {
"group": "nodes",
"data": {
"id": "v_69",
"name": "hxwang-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_71",
"name": "jbshi-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_64",
"name": "jdai-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_16",
"name": "jfxiao-bj",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_78",
"name": "jhhou-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_91",
"name": "jjsun-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_17",
"name": "jppan-bj",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_45",
"name": "jqwang-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_50",
"name": "jxli-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_42",
"name": "jyyou-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_28",
"name": "jyzhou-pc",
"parent": "group2"
}
}, {
"group": "nodes",
"data": {
"id": "v_46",
"name": "jzhao-pc",
"parent": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "v_19",
"name": "lfeng-pc",
"parent": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "v_65",
"name": "lhzhen-pc",
"parent": "group2"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_1",
"source": "n_0",
"target": "v_1"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_100",
"source": "n_0",
"target": "v_100"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_46",
"source": "n_0",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_64",
"source": "n_0",
"target": "v_64"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_65",
"source": "n_0",
"target": "v_65"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_67",
"source": "n_0",
"target": "v_67"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_69",
"source": "n_0",
"target": "v_69"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_71",
"source": "n_0",
"target": "v_71"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_76",
"source": "n_0",
"target": "v_76"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_78",
"source": "n_0",
"target": "v_78"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_83",
"source": "n_0",
"target": "v_83"
}
}, {
"data": {
"group": "edges",
"id": "n_0v_91",
"source": "n_0",
"target": "v_91"
}
}, {
"data": {
"group": "edges",
"id": "v_1n_0",
"source": "v_1",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_1v_128",
"source": "v_1",
"target": "v_128"
}
}, {
"data": {
"group": "edges",
"id": "v_100n_0",
"source": "v_100",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_16",
"source": "v_118",
"target": "v_16"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_18",
"source": "v_118",
"target": "v_18"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_46",
"source": "v_118",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_67",
"source": "v_118",
"target": "v_67"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_69",
"source": "v_118",
"target": "v_69"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_71",
"source": "v_118",
"target": "v_71"
}
}, {
"data": {
"group": "edges",
"id": "v_118v_78",
"source": "v_118",
"target": "v_78"
}
}, {
"data": {
"group": "edges",
"id": "v_128n_0",
"source": "v_128",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_1",
"source": "v_128",
"target": "v_1"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_105",
"source": "v_128",
"target": "v_105"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_46",
"source": "v_128",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "v_128v_65",
"source": "v_128",
"target": "v_65"
}
}, {
"data": {
"group": "edges",
"id": "v_15n_0",
"source": "v_15",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_50v_40",
"source": "v_50",
"target": "v_40"
}
}, {
"data": {
"group": "edges",
"id": "v_50v_46",
"source": "v_50",
"target": "v_46"
}
}, {
"data": {
"group": "edges",
"id": "v_50v_64",
"source": "v_50",
"target": "v_64"
}
}, {
"data": {
"group": "edges",
"id": "v_65v_19",
"source": "v_65",
"target": "v_19"
}
}, {
"data": {
"group": "edges",
"id": "v_65v_91",
"source": "v_65",
"target": "v_91"
}
}, {
"data": {
"group": "edges",
"id": "v_67n_0",
"source": "v_67",
"target": "n_0"
}
}, {
"data": {
"group": "edges",
"id": "v_67v_100",
"source": "v_67",
"target": "v_100"
}
}, {
"data": {
"group": "edges",
"id": "v_67v_105",
"source": "v_67",
"target": "v_105"
}
}, {
"data": {
"group": "edges",
"id": "v_67v_42",
"source": "v_67",
"target": "v_42"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_16",
"source": "v_91",
"target": "v_16"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_18",
"source": "v_91",
"target": "v_18"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_28",
"source": "v_91",
"target": "v_28"
}
}, {
"data": {
"group": "edges",
"id": "v_91v_45",
"source": "v_91",
"target": "v_45"
}
}, {
"group": "nodes",
"data": {
"id": "group0"
}
}, {
"group": "nodes",
"data": {
"id": "group1"
}
}, {
"group": "nodes",
"data": {
"id": "group2"
}
}]
});
var api = cy.expandCollapse('get');
var beforeExpand = null;
cy.unbind('expandcollapse.beforeexpand');
cy.nodes().bind('expandcollapse.beforeexpand', function(event) {
if (beforeExpand == null)
beforeExpand = cy.elements().clone(); // save the graph before the first expand
}); // Triggered before a node is expanded
cy.unbind('expandcollapse.aftercollapse');
cy.nodes().bind('expandcollapse.aftercollapse', function(event) {
if(beforeExpand != null) {
cy.elements().remove();
cy.add(beforeExpand); // set the graph to original values
beforeExpand = null;
}
});
});
body {
font-family: helvetica;
font-size: 14px;
}
#cy { /*change your css*/
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape#3.1.0/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/cytoscape-cose-bilkent#4.0.0/cytoscape-cose-bilkent.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse#3.1.1/cytoscape-expand-collapse.js"></script>
<div id="cy"></div>

The nodes in the example have positions just because it was exported from another tool.
Each time an expand or a collapse operation is performed, if the layoutBy option is set, that layout is applied to the graph. In the example the layoutBy option is set to cose-bilkent, and that is why the positions change.
I believe you can achieve what you want by setting layoutBy to null, and fisheye to false. You can see the other options and their explanations here.
P.S: for the initial coordinates, you might consider setting the layout option of Cytoscape while initializing.

I too, ran into the same issue while using fCose layout, I had forgotten to give the key , "randomize" and set it to false, a simple mistake.
From the docs, it looks it shall randomize the only the overall layout if given true but under the expand-collapse context, it rearranges every single node displayed.
If you also missed on understanding randomize while using different third-party libs, this answer shall help you.

Unable to extract graph data (nodes,links) from json in d3.js

After days of effort, I have finally created my first d3.js layout. But now I want to segregate data and script. I was trying to use JSON to keep data and extract from it. But it didn't work. Please help.
I tried this, but then it started failing:
d3.json("sample.json", function(data) {
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(data.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(data.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
...
)};
Here is the complete code I am working on.
JSFIDDLE : d3_graph_labelled_edge.js

Invalid JSON. After formatting (removing last line commas and replacing single quotes with double):
{
"nodes": [{
"name": "NE1",
"full_name": "NE1",
"type": 2,
"slug": "12.3",
"entity": "company",
"img_hrefD": "",
"img_hrefL": ""
},
{
"name": "NE2",
"full_name": "NE2",
"type": 2,
"slug": "12.4",
"entity": "company",
"img_hrefD": "",
"img_hrefL": ""
},
{
"name": "NE3",
"full_name": "NE3",
"type": 2,
"slug": "12.3",
"entity": "company",
"img_hrefD": "",
"img_hrefL": ""
},
{
"name": "NE4",
"full_name": "NE4",
"type": 2,
"slug": "12.1",
"entity": "company",
"img_hrefD": "",
"img_hrefL": ""
},
{
"name": "NE5",
"full_name": "NE5",
"type": 2,
"slug": "12.0",
"entity": "company",
"img_hrefD": "",
"img_hrefL": ""
}
],
"links": [{
"source": 0,
"target": 1,
"value": 1,
"distance": 15,
"a": "123",
"z": "111"
},
{
"source": 0,
"target": 2,
"value": 1,
"distance": 15,
"a": "123",
"z": "111"
},
{
"source": 0,
"target": 3,
"value": 1,
"distance": 15,
"a": "123",
"z": "111"
},
{
"source": 1,
"target": 2,
"value": 1,
"distance": 15,
"a": "123",
"z": "111"
},
{
"source": 1,
"target": 3,
"value": 1,
"distance": 15,
"a": "123",
"z": "111"
},
{
"source": 2,
"target": 3,
"value": 1,
"distance": 15,
"a": "123",
"z": "111"
},
{
"source": 1,
"target": 4,
"value": 1,
"distance": 15,
"a": "123",
"z": "111"
}
]
}
Here's a plunkr using the above JSON: http://plnkr.co/edit/vRrYyjH3mtPz8vEuTZKx?p=preview
Recommendation: Use JSON Lint for validation.
Hope this helps.

Stretch Swiffy SVG

How can I stretch the Swiffy result (SVG) to fit the entire page? (I can't add attributes to the SVG element because it is not there, swiffy generates it)
My swiffy:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy output</title>
<script src="runtime.js"></script>
<script>
swiffyobject = { "internedStrings": ["::::080f080f"], "tags": [{ "frames": [], "scenes": [{ "name": "Scene 1", "offset": 0 }], "type": 23 }, { "bounds": [{ "ymin": 0, "ymax": 25600, "xmin": 0, "xmax": 15360 }], "id": 1, "fillstyles": [{ "color": [-6174960], "type": 1 }], "paths": [{ "fill": 0, "data": [":::a:600ya360o:a:600Yc"] }], "flat": true, "type": 1 }, { "id": 1, "matrix": 0, "type": 3, "depth": 1 }, { "id": 2, "height": 608, "width": 608, "data": "data:image/png;base64,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\n+H88a48XWWKZOwAAAABJRU5ErkJggg\u003d\u003d", "type": 8 }, { "bounds": [{ "ymin": -6080, "ymax": 6080, "xmin": -6080, "xmax": 6080 }], "id": 3, "fillstyles": [{ "transform": "45184l::45184l080F080F", "bitmap": 2, "type": 6 }], "paths": [{ "fill": 0, "data": [":080F080Fa:160la160l:a:160Lc"] }], "flat": true, "type": 1 }, { "tags": [{ "id": 3, "matrix": "#0", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "781D335x335X781D931e727e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "397R5334d5334D397R926e341e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "8865C9730e9730E8865C064f981d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "3204F5430f5430F3204F327f699d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7706H1598f1598F7706H674f539d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "4307J2640e2640E4307J964f511d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7870K9206c9206C7870K251g566d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7005L445v445V7005L513g704d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "0936M774c774C0936M723g909d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "9333L997N997n9333L864g161e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "1149L4489C4489c1149L927g481e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7268J0394E0394e7268J888g804e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "9071H1087F1087f9071H745g097f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "8438F5462F5462f8438F520g330f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7711D3007F3007f7711D233g477f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "8615B4023E4023e8615B911f526f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "337M9455C9455c337M591f471f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "457C803T803t457C302f318f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "#0", "type": 3, "depth": 1 }, { "type": 2 }], "id": 4, "frameCount": 20, "type": 7 }, { "id": 4, "matrix": "::::00q302k", "type": 3, "depth": 2 }, { "bounds": [{ "ymin": 2918, "ymax": 25600, "xmin": 0, "xmax": 15360 }], "id": 5, "fillstyles": [{ "color": [-10507490], "type": 1 }, { "color": [-4072357], "type": 1 }, { "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":360o340la360O043ja:217ca360o:a:260Mc"] }, { "fill": 1, "data": [":485j146da:18db37D7N76I7Sa88I1Ca81Gia81Gia36Jaa37JAa9Pfb2Rp9S1tbE5fE5saa86kba05gF86kbB1n2d5wb6d8i8o4qb5o6j4w8jba:b:b4h:5v7Ja98q58Ma3e5Db8bV9eVbe:jaa99d97pbn9d1d9gby0c0g2eb8dw9n0fb7h7c6m4ha2e:a99B70Jb4Q27F89B74Jb4C1M2J5Tb8F3G9R9Jb6EQ2JQbP:1Cbb3Fi1L5ea19O88ka66D56caF0Gal15Vac8Cbc7M6m9Mb5kC0rCb3c:4eaa62gxa61gra56osa57ooa46e:a:15ta94V80Ia8c7ra9b8pbi7f5d9jb3c8c9i6fb90j70d55p28gb9x3k09e3kbo:0c:b7hB6nYb7fY5k3Ha:25Xb8G3H1R3Zb6K2T5R88Bc"] }, { "fill": 2, "data": [":204h929ba:00ha6o:a:00Hc:55fKa5Kia9ChaQ8la8fMa9fFb8h:4m5eb5d4e5d1qa:9gb:5eL4jbM1e7C5hbY5c7F7eb0Dt1Jtb1F:1JTb0DU8F8EbZ9C8C7HbL1EL9Ja:12Da9O:a:21db:1s5i90bb5i1j79b1jb6r:82b3Jb7i1J7i04Ca:6Ib:4HW5NbW2F2F0Jb0D7C6I7Eb5ER2LRc:87Pka2y96fa1Lya7Lpa0d1na7p9Bb8fK0o6Cb1gW7l5Eb7e2C8i0Hb1d7D4f6Kbv6Fv0Pa:02Da9O:a:99caE6hbE8cR8fbO3c5C2ebVw7E9ca9V44Fc:68D:a:33ka9o:a:33Kc"] }], "flat": true, "type": 1 }, { "id": 5, "matrix": 0, "type": 3, "depth": 9 }, { "bounds": [{ "ymin": -4719, "ymax": 5010, "xmin": -4719, "xmax": 4720 }], "id": 6, "paths": [{ "data": [":a549Db26I:71Q58cb17H45c46N75ib30F29f75I45nb58C46h58C71qb:26i58c71qb45c16h75i46nb29f29f46n75ib45h57c71q57cb26i:71q57Cb16h46C46n75Ib29f30F74i46Nb58c45H58c71Qb:25I58C71Qb45C16H74I45Nb30F30F46N75Ib46H58C71Q58Cc:81l16ob91e0y47j05gb55d56d05g47jb9y11f9y81lb:70f9Y82lb0Y90e05G46jb56D56d47J06gb11F9y81L9yb70F:82L9Yb91E0Y47J06Gb55D56D05G46Jb9Y12F9Y82Lb:70F9y81Lb0y91E05g47Jb56d55D47j05Gb12f9Y82l9Yb70f:81l9yc"], "line": 0 }], "flat": true, "linestyles": [{ "joint": 2, "color": [-6174960], "cap": 1, "width": [340], "miter": 10 }], "type": 1 }, { "tags": [{ "id": 6, "matrix": "::::549d549d", "type": 3, "depth": 1 }, { "type": 2 }], "id": 7, "frameCount": 1, "type": 7 }, { "id": 7, "matrix": "::::230d429l", "type": 3, "depth": 10 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "bounds": [{ "ymin": 3567, "ymax": 3743, "xmin": 6669, "xmax": 6858 }], "id": 8, "fillstyles": [{ "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":763f567cb8C:6Fzb8B8b8B3fb:5c8b1fb8bz6fzb9c:7fZb8bY8b1Fb:6C8B3Fb8BZ7FZc"] }], "flat": true, "type": 1 }, { "id": 8, "matrix": 0, "type": 3, "depth": 12 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 12 }, { "bounds": [{ "ymin": 3567, "ymax": 3743, "xmin": 6348, "xmax": 6858 }], "id": 9, "fillstyles": [{ "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":442f567cb8C:7Fzb7B7b7B3fb:6c7b1fb9bz7fzb0d:7fZb8bY8b1Fb:6C8B3Fb7BZ7FZc:21c:b8C:6Fzb8B8b8B3fb:5c8b1fb8bz6fzb9c:7fZb8bY8b1Fb:6C8B3Fb8BZ7FZc"] }], "flat": true, "type": 1 }, { "id": 9, "matrix": 0, "type": 3, "depth": 13 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 13 }, { "bounds": [{ "ymin": 3567, "ymax": 3743, "xmin": 6027, "xmax": 6858 }], "id": 10, "fillstyles": [{ "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":120f567cb8C:6Fzb7B7b7B3fb:6c7b1fb8bz6fzb9c:8fZb7bY7b1Fb:6C7B3Fb9BZ8FZc:22c:b8C:7Fzb7B7b7B3fb:6c7b1fb9bz7fzb0d:7fZb8bY8b1Fb:6C8B3Fb7BZ7FZc:21c:b8C:6Fzb8B8b8B3fb:5c8b1fb8bz6fzb9c:7fZb8bY8b1Fb:6C8B3Fb8BZ7FZc"] }], "flat": true, "type": 1 }, { "id": 10, "matrix": 0, "type": 3, "depth": 14 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 14 }, { "id": 9, "matrix": 0, "type": 3, "depth": 13 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 13 }, { "id": 8, "matrix": 0, "type": 3, "depth": 12 }, { "type": 2 }], "fileSize": 11203, "v": "5.2.0", "backgroundColor": -1, "frameSize": { "ymin": 0, "ymax": 25600, "xmin": 0, "xmax": 15360 }, "frameCount": 25, "frameRate": 24, "version": 15 };
</script>
<style>
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 100%; height: 100%">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</body>
</html>

Try specifying width and height in pixels. This works for me. Also, you may need to remove the overflow style. If this works with your file then get the width and height of the page using JavaScript and apply to the swiffy container div

Categories