MediaWiki:Gadget-GlossaryGraph.js: Difference between revisions
Jump to navigation
Jump to search
AdminIsidore (talk | contribs) No edit summary |
AdminIsidore (talk | contribs) No edit summary |
||
Line 10: | Line 10: | ||
} | } | ||
// Query | // Extract term from page title (e.g., "Lingua:Dictum" -> "Dictum") | ||
var term = pageTitle.split(':').pop(); | |||
// Query SMW for pages with Glossary-Definition containing the term | |||
var smwQuery = encodeURIComponent('[[Glossary-Definition::+*' + term + '*]]|?Glossary-Term'); | |||
new mw.Api().get({ | new mw.Api().get({ | ||
action: 'ask', | action: 'ask', | ||
query: | query: smwQuery, | ||
format: 'json' | format: 'json' | ||
}).done(function(data) { | }).done(function(data) { | ||
Line 29: | Line 33: | ||
} | } | ||
var nodes = [{ id: pageTitle }]; | var nodes = [{ id: pageTitle }]; | ||
var edges = []; | var edges = []; | ||
Line 37: | Line 40: | ||
}); | }); | ||
$container.empty(); | $container.empty(); | ||
var width = 400, height = 300; | var width = 400, height = 300; | ||
Line 46: | Line 48: | ||
.style('background-color', '#000000'); | .style('background-color', '#000000'); | ||
var simulation = d3.forceSimulation(nodes) | var simulation = d3.forceSimulation(nodes) | ||
.force('link', d3.forceLink(edges).id(d => d.id).distance(100)) | .force('link', d3.forceLink(edges).id(d => d.id).distance(100)) | ||
Line 52: | Line 53: | ||
.force('center', d3.forceCenter(width / 2, height / 2)); | .force('center', d3.forceCenter(width / 2, height / 2)); | ||
var link = svg.append('g') | var link = svg.append('g') | ||
.selectAll('line') | .selectAll('line') | ||
Line 60: | Line 60: | ||
.attr('stroke-width', 2); | .attr('stroke-width', 2); | ||
var node = svg.append('g') | var node = svg.append('g') | ||
.selectAll('circle') | .selectAll('circle') | ||
Line 83: | Line 82: | ||
})); | })); | ||
node.append('title').text(d => d.id); | node.append('title').text(d => d.id); | ||
simulation.on('tick', function() { | simulation.on('tick', function() { | ||
link.attr('x1', d => d.source.x) | link.attr('x1', d => d.source.x) |
Revision as of 00:42, 30 August 2025
$(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;
}
// Extract term from page title (e.g., "Lingua:Dictum" -> "Dictum")
var term = pageTitle.split(':').pop();
// Query SMW for pages with Glossary-Definition containing the term
var smwQuery = encodeURIComponent('[[Glossary-Definition::+*' + term + '*]]|?Glossary-Term');
new mw.Api().get({
action: 'ask',
query: smwQuery,
format: 'json'
}).done(function(data) {
var results = data.query.results || {};
var links = [];
for (var page in results) {
if (results.hasOwnProperty(page) && page !== pageTitle) {
links.push({ title: page });
}
}
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');
});
});
});
});