From 9335aec2424f77005c843ce0eb1b106fc71ebdad Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Mon, 3 Mar 2014 12:14:03 +0100 Subject: [PATCH] svg timeline work and refactoring. --- examples/graph/02_random_nodes.html | 63 +++++++++++++++++++ src/graph/graphMixins/MixinLoader.js | 42 ------------- src/graph/graphMixins/physics/PhysicsMixin.js | 44 +++++++++++++ src/svgTimeline/svgTimeline.js | 18 ++++-- 4 files changed, 121 insertions(+), 46 deletions(-) diff --git a/examples/graph/02_random_nodes.html b/examples/graph/02_random_nodes.html index ea1202aa..d32a6efb 100755 --- a/examples/graph/02_random_nodes.html +++ b/examples/graph/02_random_nodes.html @@ -107,6 +107,69 @@ +Barnes Hut
+Repulsion
+Hierarchical Repulsion
+ + + + + + + + + + + + + + + + + + + +
Barnes Hut
gravitationalConstant-500-20000
centralGravity0.03
springLength0500
springConstant00.5
damping00.3
+ + + + + + + + + + + + + + + + + + + +
Repulsion
nodeDistance0300
centralGravity0.03
springLength0500
springConstant00.5
damping00.3
+ + + + + + + + + + + + + + + + + + + +
Hierarchical Repulsion
nodeDistance0300
centralGravity0.03
springLength0500
springConstant00.5
damping00.3

diff --git a/src/graph/graphMixins/MixinLoader.js b/src/graph/graphMixins/MixinLoader.js index e31dd846..6ea1c553 100644 --- a/src/graph/graphMixins/MixinLoader.js +++ b/src/graph/graphMixins/MixinLoader.js @@ -46,48 +46,6 @@ var graphMixinLoaders = { }, - /** - * This loads the node force solver based on the barnes hut or repulsion algorithm - * - * @private - */ - _loadSelectedForceSolver : function() { - // this overloads the this._calculateNodeForces - if (this.constants.physics.barnesHut.enabled == true) { - this._clearMixin(repulsionMixin); - this._clearMixin(hierarchalRepulsionMixin); - - this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity; - this.constants.physics.springLength = this.constants.physics.barnesHut.springLength; - this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant; - this.constants.physics.damping = this.constants.physics.barnesHut.damping; - - this._loadMixin(barnesHutMixin); - } - else if (this.constants.physics.hierarchicalRepulsion.enabled == true) { - this._clearMixin(barnesHutMixin); - this._clearMixin(repulsionMixin); - - this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity; - this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength; - this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant; - this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping; - - this._loadMixin(hierarchalRepulsionMixin); - } - else { - this._clearMixin(barnesHutMixin); - this._clearMixin(hierarchalRepulsionMixin); - this.barnesHutTree = undefined; - - this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity; - this.constants.physics.springLength = this.constants.physics.repulsion.springLength; - this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant; - this.constants.physics.damping = this.constants.physics.repulsion.damping; - - this._loadMixin(repulsionMixin); - } - }, /** diff --git a/src/graph/graphMixins/physics/PhysicsMixin.js b/src/graph/graphMixins/physics/PhysicsMixin.js index ad24599c..f492d500 100644 --- a/src/graph/graphMixins/physics/PhysicsMixin.js +++ b/src/graph/graphMixins/physics/PhysicsMixin.js @@ -18,6 +18,50 @@ var physicsMixin = { }, + + /** + * This loads the node force solver based on the barnes hut or repulsion algorithm + * + * @private + */ + _loadSelectedForceSolver : function() { + // this overloads the this._calculateNodeForces + if (this.constants.physics.barnesHut.enabled == true) { + this._clearMixin(repulsionMixin); + this._clearMixin(hierarchalRepulsionMixin); + + this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity; + this.constants.physics.springLength = this.constants.physics.barnesHut.springLength; + this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant; + this.constants.physics.damping = this.constants.physics.barnesHut.damping; + + this._loadMixin(barnesHutMixin); + } + else if (this.constants.physics.hierarchicalRepulsion.enabled == true) { + this._clearMixin(barnesHutMixin); + this._clearMixin(repulsionMixin); + + this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity; + this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength; + this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant; + this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping; + + this._loadMixin(hierarchalRepulsionMixin); + } + else { + this._clearMixin(barnesHutMixin); + this._clearMixin(hierarchalRepulsionMixin); + this.barnesHutTree = undefined; + + this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity; + this.constants.physics.springLength = this.constants.physics.repulsion.springLength; + this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant; + this.constants.physics.damping = this.constants.physics.repulsion.damping; + + this._loadMixin(repulsionMixin); + } + }, + /** * Before calculating the forces, we check if we need to cluster to keep up performance and we check * if there is more than one node. If it is just one node, we dont calculate anything. diff --git a/src/svgTimeline/svgTimeline.js b/src/svgTimeline/svgTimeline.js index f2e5a4a0..fe7d46bf 100644 --- a/src/svgTimeline/svgTimeline.js +++ b/src/svgTimeline/svgTimeline.js @@ -269,6 +269,7 @@ SvgTimeline.prototype._update = function() { }; SvgTimeline.prototype._getActiveItems = function() { + // reset all currently active items to inactive for (var itemId in this.activeItems) { if (this.activeItems.hasOwnProperty(itemId)) { this.activeItems[itemId].active = false; @@ -311,11 +312,19 @@ SvgTimeline.prototype._updateItems = function() { for (var i = 0; i < this.sortedActiveItems.length; i++) { var item = this.sortedActiveItems[i]; if (item.svg == null) { +// item.svg = d3.select("svg#main") +// .append("rect") +// .attr("class","item") +// .style("stroke", "rgb(6,120,155)") +// .style("fill", "rgb(6,120,155)"); item.svg = d3.select("svg#main") - .append("rect") - .attr("class","item") - .style("stroke", "rgb(6,120,155)") - .style("fill", "rgb(6,120,155)"); + .append("foreignObject") + item.svgContent = item.svg.append("xhtml:body") + .style("font", "14px 'Helvetica Neue'") + .style("background-color", "#ff00ff") + .html("

An HTML Foreign Object in SVG

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Quisque nisi risus, sagittis quis tempor nec, aliquam eget neque. Nulla bibendum semper lorem non ullamcorper. Nulla non ligula lorem. Praesent porttitor, tellus nec suscipit aliquam, enim elit posuere lorem, at laoreet enim ligula sed tortor. Ut sodales, urna a aliquam semper, nibh diam gravida sapien, sit amet fermentum purus lacus eget massa. Donec ac arcu vel magna consequat pretium et vel ligula. Donec sit amet erat elit. Vivamus eu metus eget est hendrerit rutrum. Curabitur vitae orci et leo interdum egestas ut sit amet dui. In varius enim ut sem posuere in tristique metus ultrices.

Integer mollis massa at orci porta vestibulum. Pellentesque dignissim turpis ut tortor ultricies condimentum et quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lorem vulputate dui pharetra luctus. Sed vulputate, nunc quis porttitor scelerisque, dui est varius ipsum, eu blandit mauris nibh pellentesque tortor. Vivamus ultricies ante eget ipsum pulvinar ac tempor turpis mollis. Morbi tortor orci, euismod vel sagittis ac, lobortis nec est. Quisque euismod venenatis felis at dapibus. Vestibulum dignissim nulla ut nisi tristique porttitor. Proin et nunc id arcu cursus dapibus non quis libero. Nunc ligula mi, bibendum non mattis nec, luctus id neque. Suspendisse ut eros lacus. Praesent eget lacus eget risus congue vestibulum. Morbi tincidunt pulvinar lacus sed faucibus. Phasellus sed vestibulum sapien."); + + if (item.end == 0) { item.svgLine = d3.select("svg#main") @@ -329,6 +338,7 @@ SvgTimeline.prototype._updateItems = function() { .attr("x",this._getXforItem(item)) .attr("y",this._getYforItem(item, i)) + .attr('height',25) if (item.end == 0) { item.svgLine.attr('y2',item.y)