this.type_property_link = {
"unrecognized": {
- "color": "lightgray",
+ "color": "lightgray"
},
};
this.force = d3.forceSimulation()
.force("charge", d3.forceManyBody())
- .force("collide", d3.forceCollide().radius(80))
+ .force("collide", d3.forceCollide().radius(40))
// .force("link", d3.forceLink().distance(80).iterations(1).id(function (d) {
- .force("link", d3.forceLink().distance(100).id(function (d) {
+ .force("link", d3.forceLink().distance(function(d){
+ return d.short ? 1 : 100;
+ }).id(function (d) {
return d.id;
}))
.force("center", d3.forceCenter(this.width / 2, this.height / 2));
this.svg = d3.select("#graph_editor_container").append("svg")
.attr("id", "graph_svg")
.attr("preserveAspectRatio", "xMinYMid")
- .attr("width", this.width)
- .attr("height", this.height);
+ .attr("width", '100%')
+ .attr("height", '100%');
//End Arrow style
this.defs = this.svg.append("svg:defs");
//d3.event.preventDefault();
if (self.lastKeyDown !== -1) return;
self.lastKeyDown = d3.event.keyCode;
- if (self.lastKeyDown === CANC_BUTTON && self._selected_node !== undefined) {
- self.removeNode(self._selected_node, null, showAlert);
- } else if (self.lastKeyDown === CANC_BUTTON && self._selected_link !== undefined) {
- self.removeLink(self._selected_link, null, showAlert);
- }
+ // if (self.lastKeyDown === CANC_BUTTON && self._selected_node !== undefined) {
+ // self.removeNode(self._selected_node, null, showAlert);
+ // } else if (self.lastKeyDown === CANC_BUTTON && self._selected_link !== undefined) {
+ // self.removeLink(self._selected_link, null, showAlert);
+ // }
})
.on('keyup', function () {
self.height = self.container.height();
chart.attr("width", self.container.width());
chart.attr("height", self.container.height());
- }).trigger("resize");
+ });
}
* @returns {boolean}
*/
GraphEditor.prototype.addLink = function (link) {
- console.log("addLink" + JSON.stringify(link));
+
if (link.source && link.target) {
this.force.stop();
this.cleanAll();
//log(data)
var self = this;
- this.link = this.svg
+ var link = this.svg
.selectAll()
.data(self.d3_graph.links
.filter(this.link_filter_cb)
- )
- .enter().append("g")
+ );
+ link.exit().remove();
+ this.link = link.enter().append("g")
.attr("class", "link cleanable")
.append("path")
.attr("class", "link")
return (d.directed_edge ? "url(#" + marker_url + ")" : '');
});
- this.nodeContainer = this.svg
+ var nodeContainer = this.svg
.selectAll()
.data(self.d3_graph.nodes
- .filter(this.node_filter_cb))
- .enter()
+ .filter(this.node_filter_cb));
+ nodeContainer.exit().remove();
+ nodeContainer.enter()
.append("g")
// .attr("class", "nodosdads")
.attr("class", "node cleanable");
- this.svg.selectAll('.node')
+ var nodes_symbols = this.svg.selectAll('.node')
.data(self.d3_graph.nodes
.filter(this.node_filter_cb))
.filter(function (d) {
return (d.info.type === undefined) || (self._node_property_by_type(d.info.type, 'image', d) === undefined)
- })
+ });
+ nodes_symbols.exit().remove();
- .append("svg:path")
+ nodes_symbols.append("svg:path")
.attr("d", d3.symbol()
.size(function (d) {
return Math.PI * Math.pow(self._node_property_by_type(d.info.type, 'size', d), 2) / 4;
.filter(function (d) {
return self._node_property_by_type(d.info.type, 'image', d) != undefined
});
-
+ figure_node.exit().remove();
figure_node.append("svg:image")
.attr("xlink:href", function (d) {
return self._node_property_by_type(d.info.type, 'image', d)