1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-16 06:44:50 +00:00
TiddlyWiki5/plugins/tiddlywiki/d3/cloudwidget.js

134 lines
3.5 KiB
JavaScript
Raw Normal View History

2013-07-30 11:36:36 +00:00
/*\
title: $:/plugins/tiddlywiki/d3/cloudwidget.js
type: application/javascript
module-type: widget
2013-07-30 11:36:36 +00:00
A widget for displaying word clouds. Derived from https://github.com/jasondavies/d3-cloud
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget,
2013-10-24 19:45:53 +00:00
d3 = require("$:/plugins/tiddlywiki/d3/d3.js").d3;
2013-07-30 11:36:36 +00:00
if($tw.browser) {
// Frightful hack to give the cloud plugin the global d3 variable it needs
window.d3 = d3;
d3.layout.cloud = require("$:/plugins/tiddlywiki/d3/d3.layout.cloud.js").cloud;
}
2013-10-24 19:45:53 +00:00
var CloudWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
2013-07-30 11:36:36 +00:00
};
2013-10-24 19:45:53 +00:00
/*
Inherit from the base widget class
*/
CloudWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
CloudWidget.prototype.render = function(parent,nextSibling) {
// Save the parent dom node
this.parentDomNode = parent;
// Compute our attributes
this.computeAttributes();
// Execute our logic
this.execute();
// Create the chart
var chart = this.createChart(parent,nextSibling);
this.updateChart = chart.updateChart;
if(this.updateChart) {
this.updateChart();
}
// Insert the chart into the DOM and render any children
parent.insertBefore(chart.domNode,nextSibling);
this.domNodes.push(chart.domNode);
};
CloudWidget.prototype.createChart = function(parent,nextSibling) {
var self = this,
fill = d3.scale.category20(),
data = this.wiki.getTiddlerData(this.cloudData);
// Use dummy data if none provided
if(!data) {
data = "This word cloud does not have any data in it".split(" ").map(function(d) {
return {text: d, size: 10 + Math.random() * 90};
});
}
// Create the svg element
var svgElement = d3.select(parent).insert("svg",function() {return nextSibling;})
2013-10-24 19:45:53 +00:00
.attr("width", 600)
.attr("height", 400);
// Create the main group
var mainGroup = svgElement
.append("g")
.attr("transform", "translate(300,200)");
// Create the layout
var layout = d3.layout.cloud().size([600, 400])
.words(data)
.padding(5)
.rotate(function() { return ~~(Math.random() * 5) * 30 - 60; })
.font("Impact")
.fontSize(function(d) { return d.size*2; })
.on("end", draw)
.start();
// Function to draw all the words
function draw(words) {
mainGroup.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
function updateChart() {
layout.spiral(self.spiral);
}
return {
domNode: svgElement[0][0],
updateChart: updateChart
2013-07-30 11:36:36 +00:00
};
};
2013-10-24 19:45:53 +00:00
/*
Compute the internal state of the widget
*/
CloudWidget.prototype.execute = function() {
// Get the parameters from the attributes
this.cloudData = this.getAttribute("data");
this.cloudSpiral = this.getAttribute("spiral","archimedean");
2013-07-30 11:36:36 +00:00
};
2013-10-24 19:45:53 +00:00
/*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/
CloudWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes.data || changedTiddlers[this.cloudData]) {
this.refreshSelf();
return true;
} else if(changedAttributes.spiral) {
2013-10-24 19:45:53 +00:00
this.execute();
2013-07-30 11:36:36 +00:00
if(this.updateChart) {
this.updateChart();
}
2013-10-24 19:45:53 +00:00
return true;
2013-07-30 11:36:36 +00:00
}
2013-10-24 19:45:53 +00:00
return false;
2013-07-30 11:36:36 +00:00
};
exports.d3cloud = CloudWidget;
})();