I am creating chart using D3 Treemap using extJS,
How to insert node in the existing Tree Map and how to change the value of expanded property, In
my case it is always returning false, generally it value should be toggle between true and false.
I am dynamically creating store based on which node is selected. I am able to create the tree but expanded property is remains the false
Ext.application({
name: 'fiddle',
launch: function () {
var SegTreeStore = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'GATE A 30',
value: 3,
expanded: false,
children: [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}]
}, {
text: 'Vision',
value: 40,
expanded: false,
children: [{
text: 'Kang',
value: 3,
leaf: true
}, {
text: 'Magneto',
value: 4,
leaf: true
}, {
text: 'Norman Osborn',
value: 5,
leaf: true
}, {
text: 'Anti-Vision',
value: 7,
leaf: true
}]
}, {
text: 'Ghost Rider',
value: 3,
expanded: false,
children: [{
text: 'Mephisto',
value: 1,
leaf: true
}]
}, {
text: 'Loki',
value: 2,
expanded: false,
children: [{
text: 'Captain America',
value: 3,
leaf: true
}, {
text: 'Deadpool',
value: 4,
leaf: true
}, {
text: 'Odin',
value: 5,
leaf: true
}, {
text: 'Scarlet Witch',
value: 2,
leaf: true
}, {
text: 'Silver Surfer',
value: 1,
leaf: true
}]
}, {
text: 'Daredevil',
value: 1,
expanded: false,
children: [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}]
}]
}
});
var SegTreeStore3 = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'Daredevil',
value: 1,
expanded: false,
children: [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}]
}]
}
});
var SegTreeStore2 = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'GATE A 30',
value: 3,
expanded: true,
children: [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}]
}]
}
});
var SegTreeStore1 = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'Vision',
value: 40,
expanded: false,
children: [{
text: 'Kang',
value: 10,
leaf: true
}, {
text: 'Magneto',
value: 12,
leaf: true
}, {
text: 'Norman Osborn',
value: 12,
leaf: true
}, {
text: 'Anti-Vision',
value: 17,
leaf: true
}]
}]
}
});
function createSegTreeStore3(originalStore,selectedNodeText,selectedNodeIsExpanded) {
// Find the 'Daredevil' node in the original store
var daredevilNode = null;
originalStore.getRootNode().eachChild(function (child) {
if (child.get('text') === selectedNodeText) {
daredevilNode = child.copy(undefined,true); // Make a copy of the node
//daredevilNode.data.expanded = selectedNodeIsExpanded;
return false; // Stop the loop
}
});
if (daredevilNode) {
// Create the new store with the 'Daredevil' node
return Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children:[{
text: daredevilNode.get('text'),
value: daredevilNode.get('value'),
expanded: daredevilNode.get('expanded'),
children: Ext.clone(daredevilNode.get('children'))
}]
//children: [daredevilNode.data]
//children : Ext.clone(daredevilNode.data)
}
});
}
return null;
}
function updateValues(node, selectedNodeText) {
if (node.text !== selectedNodeText) {
node.value = 0;
}
if (node.children) {
node.children.forEach(child => updateValues(child, selectedNodeText));
}
}
function updateNodeValues(node, newValue, selectedNodeText, selectedNodeDepth) {
console.log(node);
if (node.text != selectedNodeText && node.depth == selectedNodeDepth) {
node.value = 0;
}
if (node.children) {
node.children.forEach(child => updateNodeValues(child, newValue, selectedNodeText, selectedNodeDepth));
}
//node.value = newValue;
}
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'TreeMap Chart',
id: 'Test_TreeMap',
height: 750,
width: 750,
layout: 'fit',
items: [{
xtype: 'd3-treemap',
//autoLoad: true,
nodeValue: function (record) {
// The value in your data to derive the size of the tile from.
return record.get('value');
},
store: SegTreeStore,
listeners: {
element: 'element',
dblclick: function (event, target) {
var tempTreeStore = SegTreeStore;
console.log(tempTreeStore);
console.log(target.__data__.data.data.text);
var selectedNodeText = target.__data__.data.data.text;
var selectedNodeIsExpanded = target.__data__.data.data.expanded;
var selectedNodeDepth = target.__data__.data.data.depth;
var textToChildrenMap = {
"Root": [{
text: 'GATE A 30',
value: 5,
expanded: true,
children: [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}]
}, {
text: 'Vision',
value: 4,
expanded: false,
children: [{
text: 'Kang',
value: 4,
leaf: true
}, {
text: 'Magneto',
value: 3,
leaf: true
}, {
text: 'Norman Osborn',
value: 2,
leaf: true
}, {
text: 'Anti-Vision',
value: 1,
leaf: true
}]
}, {
text: 'Ghost Rider',
value: 3,
expanded: false,
children: [{
text: 'Mephisto',
value: 1,
leaf: true
}]
}, {
text: 'Loki',
value: 2,
expanded: false,
children: [{
text: 'Captain America',
value: 3,
leaf: true
}, {
text: 'Deadpool',
value: 4,
leaf: true
}, {
text: 'Odin',
value: 5,
leaf: true
}, {
text: 'Scarlet Witch',
value: 2,
leaf: true
}, {
text: 'Silver Surfer',
value: 1,
leaf: true
}]
}, {
text: 'Daredevil',
value: 1,
expanded: false,
children: [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}]
}],
"GATE A 30": [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}],
"Vision": [{
text: 'Kang',
value: 4,
leaf: true
}, {
text: 'Magneto',
value: 3,
leaf: true
}, {
text: 'Norman Osborn',
value: 2,
leaf: true
}, {
text: 'Anti-Vision',
value: 1,
leaf: true
}],
"Ghost Rider": [{
text: 'Mephisto',
value: 1,
leaf: true
}],
"Loki": [{
text: 'Captain America',
value: 3,
leaf: true
}, {
text: 'Deadpool',
value: 4,
leaf: true
}, {
text: 'Odin',
value: 5,
leaf: true
}, {
text: 'Scarlet Witch',
value: 2,
leaf: true
}, {
text: 'Silver Surfer',
value: 1,
leaf: true
}],
"Daredevil": [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}],
"The Leader": [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
};
// Update values in the entire tree
var SegTreeStore5 = createSegTreeStore3(this.component.getStore(),selectedNodeText,selectedNodeIsExpanded);
console.log("Filtering daredevils !!!!");
console.log(SegTreeStore5);
console.log(SegTreeStore);
console.log(SegTreeStore1);
console.log(SegTreeStore2);
console.log(SegTreeStore3);
//console.log(SegTreeStore4);
if (selectedNodeText == "Root"){
this.component.setStore(SegTreeStore);
}else{
this.component.setStore(SegTreeStore5);
}
/*if (selectedNodeText == "Vision") {
this.component.setStore(SegTreeStore1);
} else if (selectedNodeText == "Daredevil") {
this.component.setStore(SegTreeStore3);
} else if ((selectedNodeText == "GATE A 30")) {
this.component.setStore(SegTreeStore2);
} else {
this.component.setStore(SegTreeStore)
}*/
}
}
}]
});
}
});