MediaWiki:Gadget-GlossaryGraph.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
$(function() {
// Find all the places on the page where a graph should be drawn
$('.glossary-graph').each(function() {
var $container = $(this);
var pageTitle = $container.data('page-title');
if (!pageTitle) return;
// Use the MediaWiki API to get all links from the specified page
new mw.Api().get({
action: 'query',
prop: 'links',
titles: pageTitle,
pllimit: 'max'
}).done(function(data) {
var pages = data.query.pages;
var pageId = Object.keys(pages)[0];
var links = pages[pageId].links || [];
if (links.length === 0) {
$container.text('No connections found.');
return;
}
// --- D3.js Visualization Code Will Go Here ---
// 1. Transform the API data into a nodes/links JSON object
var nodes = [{ id: pageTitle }];
var edges = [];
links.forEach(function(link) {
nodes.push({ id: link.title });
edges.push({ source: pageTitle, target: link.title });
});
// For now, let's just display the JSON to prove it works
var jsonOutput = JSON.stringify({ nodes: nodes, links: edges }, null, 2);
$container.html('<pre>' + jsonOutput + '</pre>');
});
});
});