Hey im working with that example . Watch below for my modified Sourcecode.
Depending on the propertie "enabled" of a node it is coloured green or red.
nodeUpdate.select("circle")
.attr("r", 10)
.style("fill", function (d) {
return d.enabled ? "green" : "red";
});
I have another .js-file for modifying the nodes enabled property. After changing the property i want to refresh the visualization of the tree. The click event is working. But i have no idea how to refresh the tree in my source code below.
So here is the source code for my tree widget:
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dojo/_base/array",
"dojo/on",
"ct/_Connect",
"ct/_lang"
],
function (declare, WidgetBase, d_array, on, Connect, ct_lang) {
return declare([WidgetBase], {
resize: function (dim) {
this._tree.size([dim.h, dim.w]);
},
postCreate: function () {
this.inherited(arguments);
var that = this;
var d3 = this.d3;
var mapModel = this.mapModel;
var div = this.domNode;
var m = [20, 120, 20, 120],
w = 900 - m[1] - m[3],
h = 900 - m[0] - m[2],
i = 0,
root;
var tree = this._tree = d3.layout.tree()
.size([h, w]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
var vis = d3.select(div).append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// var myjson for treedata
var myjson = traverseTree(mapModel.getRoot(), {});
function traverseTree(node) {
var resultChildren = [];
var resultEnabled = node.get("enabled");
var children = node.get("children");
if (children && children.length) {
d_array.forEach(
children, // 1.Parameter
function (child) { // 2. Parameter von forEach Funktion
resultChildren.push(traverseTree(child));
}
);
}
return {
name: node.id, // gebe "name : node.id" zurrück
children: resultChildren,
enabled: resultEnabled
};
}
root = myjson;
root.x0 = h / 2;
root.y0 = 0;
function toggleAll(d) {
if (d.children) {
d.children.forEach(toggleAll);
toggle(d);
}
}
// Initialize the display to show a few nodes.
root.children.forEach(toggleAll);
toggle(root);
update(root);
function update(source) {
var duration = d3.event && d3.event.altKey ? 5000 : 500;
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
//click once
.on("click", function (d) {
toggle(d);
update(d);
that.onNodeClick(d);
})
//connect p
//click twice
.on("dblclick", function (d) {
console.log("TEST FOR DOUBLECLICK");
});
nodeEnter.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("svg:text")
.attr("x", function (d) {
return d.children || d._children ? -10 : 10;
})
.attr("dy", ".35em")
.attr("text-anchor", function (d) {
return d.children || d._children ? "end" : "start";
})
.text(function (d) {
return d.name;
})
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeUpdate.select("circle")
.attr("r", 10)
.style("fill", function (d) {
return d.enabled ? "green" : "red";
});
nodeUpdate.select("text")
.style("fill-opacity", 1)
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function (d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function (d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children.
function toggle(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
}
},
onNodeClick: function (e) {
}
});
});
So my question is: How do i modify my tree (update/refresh/whatever) after changing nodes properties?
In other words: I want to do this on my code example.
