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() {
'use strict';
mw.loader.using(['ext.gadget.d3', 'mediawiki.api'], function() {
$('.glossary-graph').each(function() {
var $container = $(this);
var pageTitle = $container.data('page-title');
if (!pageTitle) {
$container.text('Error: No page title');
return;
}
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;
}
var nodes = [{ id: pageTitle }];
var edges = [];
links.forEach(function(link) {
nodes.push({ id: link.title });
edges.push({ source: pageTitle, target: link.title });
});
$container.empty();
var width = 400, height = 300;
var svg = d3.select($container[0])
.append('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', '#000000');
var simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(edges).id(d => d.id).distance(100))
.force('charge', d3.forceManyBody().strength(-200))
.force('center', d3.forceCenter(width / 2, height / 2));
var link = svg.append('g')
.selectAll('line')
.data(edges)
.enter().append('line')
.attr('stroke', '#00FF00')
.attr('stroke-width', 2);
var node = svg.append('g')
.selectAll('circle')
.data(nodes)
.enter().append('circle')
.attr('r', 10)
.attr('fill', '#00CC00')
.call(d3.drag()
.on('start', function(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
})
.on('drag', function(event, d) {
d.fx = event.x;
d.fy = event.y;
})
.on('end', function(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}));
node.append('title').text(d => d.id);
simulation.on('tick', function() {
link.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
node.attr('cx', d => d.x)
.attr('cy', d => d.y);
});
}).fail(function(error) {
$container.text('Error: API request failed');
});
});
});
});