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 SemanticMediaWiki for related terms
             new mw.Api().get({
             new mw.Api().get({
                 action: 'query',
                 action: 'ask',
                 prop: 'links',
                 query: '[[Glossary-Definition::+]][[Glossary-Definition::' + pageTitle + '||*' + pageTitle + '*]]|?Glossary-Term',
                titles: pageTitle,
                 format: 'json'
                 pllimit: 'max'
             }).done(function(data) {
             }).done(function(data) {
                 var pages = data.query.pages;
                 var results = data.query.results || {};
                 var pageId = Object.keys(pages)[0];
                 var links = [];
                 var links = pages[pageId].links || [];
                 for (var page in results) {
                    if (results.hasOwnProperty(page) && page !== pageTitle) {
                        links.push({ title: page });
                    }
                }
 
                 if (links.length === 0) {
                 if (links.length === 0) {
                     $container.text('No connections found.');
                     $container.text('No connections found.');
Line 24: Line 29:
                 }
                 }


                // Transform data into nodes and links
                 var nodes = [{ id: pageTitle }];
                 var nodes = [{ id: pageTitle }];
                 var edges = [];
                 var edges = [];
Line 31: Line 37:
                 });
                 });


                // Clear container and create SVG
                 $container.empty();
                 $container.empty();
                 var width = 400, height = 300;
                 var width = 400, height = 300;
Line 39: Line 46:
                     .style('background-color', '#000000');
                     .style('background-color', '#000000');


                // Force simulation
                 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 44: Line 52:
                     .force('center', d3.forceCenter(width / 2, height / 2));
                     .force('center', d3.forceCenter(width / 2, height / 2));


                // Draw links
                 var link = svg.append('g')
                 var link = svg.append('g')
                     .selectAll('line')
                     .selectAll('line')
Line 51: Line 60:
                     .attr('stroke-width', 2);
                     .attr('stroke-width', 2);


                // Draw nodes
                 var node = svg.append('g')
                 var node = svg.append('g')
                     .selectAll('circle')
                     .selectAll('circle')
Line 73: Line 83:
                         }));
                         }));


                // Add tooltips
                 node.append('title').text(d => d.id);
                 node.append('title').text(d => d.id);


                // Update positions on tick
                 simulation.on('tick', function() {
                 simulation.on('tick', function() {
                     link.attr('x1', d => d.source.x)
                     link.attr('x1', d => d.source.x)