mirror of
				https://github.com/Jermolene/TiddlyWiki5
				synced 2025-10-31 15:42:59 +00:00 
			
		
		
		
	Add "spiral" attribute to wordcloud widget
This commit is contained in:
		
							
								
								
									
										48
									
								
								plugins/tiddlywiki/d3/cloudwidget.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										48
									
								
								plugins/tiddlywiki/d3/cloudwidget.js
									
									
									
									
										vendored
									
									
								
							| @@ -30,7 +30,7 @@ var CloudWidget = function(renderer) { | ||||
| CloudWidget.prototype.generate = function() { | ||||
| 	// Get the parameters | ||||
| 	this.data = this.renderer.getAttribute("data"); | ||||
| 	this.grouped = this.renderer.getAttribute("grouped","no"); | ||||
| 	this.spiral = this.renderer.getAttribute("spiral","archimedean"); | ||||
| 	// Set the return element | ||||
| 	this.tag = "div"; | ||||
| 	this.attributes = { | ||||
| @@ -50,9 +50,9 @@ CloudWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) | ||||
| 		var oldDomNode = this.renderer.domNode, | ||||
| 			newDomNode = this.renderer.renderInDom(); | ||||
| 		oldDomNode.parentNode.replaceChild(newDomNode,oldDomNode); | ||||
| 	} else if(changedAttributes.grouped) { | ||||
| 		// Update the chart if the grouping setting has changed | ||||
| 		this.grouped = this.renderer.getAttribute("grouped","no"); | ||||
| 	} else if(changedAttributes.spiral) { | ||||
| 		// Update the chart if the spiral setting has changed | ||||
| 		this.spiral = this.renderer.getAttribute("spiral","archimedean"); | ||||
| 		if(this.updateChart) { | ||||
| 			this.updateChart(); | ||||
| 		} | ||||
| @@ -61,29 +61,39 @@ CloudWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) | ||||
|  | ||||
| CloudWidget.prototype.createChart = function() { | ||||
|  | ||||
| 	var self = this; | ||||
|  | ||||
| 	var domNode = this.renderer.domNode; | ||||
|  | ||||
| 	  var fill = d3.scale.category20(); | ||||
|  | ||||
|   d3.layout.cloud().size([300, 300]) | ||||
|       .words( | ||||
|         "As Apple patiently iterates its hardware design for the iPhone, we can extrapolate where they are heading And it looks awfully likely that the Platonic ideal of the iPhone is a slab of black glass for us to touch and look at with a disembodied voice to talk to No ports or grilles, just an array of radios printed onto the glass".split(" ").map(function(d) { | ||||
|  | ||||
| 	var data = this.renderer.renderTree.wiki.getTiddlerData(this.data); | ||||
|  | ||||
| 	if(!data) { | ||||
| 		// Use dummy data if none provided | ||||
| 		data = "This word cloud does not have any data in it".split(" ").map(function(d) { | ||||
|         return {text: d, size: 10 + Math.random() * 90}; | ||||
|       })) | ||||
|       }) | ||||
| 	} | ||||
|  | ||||
|   var svg = d3.select(domNode).append("svg") | ||||
|         .attr("width", 600) | ||||
|         .attr("height", 400) | ||||
|       .append("g") | ||||
|         .attr("transform", "translate(300,200)"); | ||||
|  | ||||
|   var layout = d3.layout.cloud().size([600, 400]) | ||||
|       .words(data) | ||||
|       .padding(5) | ||||
|       .rotate(function() { return ~~(Math.random() * 2) * 90; }) | ||||
|       .rotate(function() { return ~~(Math.random() * 5) * 30 - 60; }) | ||||
|       .font("Impact") | ||||
|       .fontSize(function(d) { return d.size; }) | ||||
|       .fontSize(function(d) { return d.size*2; }) | ||||
|       .on("end", draw) | ||||
|       .start(); | ||||
|  | ||||
|   function draw(words) { | ||||
|     d3.select(domNode).append("svg") | ||||
|         .attr("width", 300) | ||||
|         .attr("height", 300) | ||||
|       .append("g") | ||||
|         .attr("transform", "translate(150,150)") | ||||
|       .selectAll("text") | ||||
|     svg.selectAll("text") | ||||
|         .data(words) | ||||
|       .enter().append("text") | ||||
|         .style("font-size", function(d) { return d.size + "px"; }) | ||||
| @@ -96,6 +106,12 @@ CloudWidget.prototype.createChart = function() { | ||||
|         .text(function(d) { return d.text; }); | ||||
|   } | ||||
|  | ||||
|   function updateChart() { | ||||
| 	layout.spiral(self.spiral); | ||||
|   } | ||||
|  | ||||
|   return updateChart; | ||||
|  | ||||
| }; | ||||
|  | ||||
| exports.d3cloud = CloudWidget; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Jeremy Ruston
					Jeremy Ruston