Regarding d3js, it supports AMD so it can be easily integrated in XWiki. And there's a WebJar available https://search.maven.org/search?q=a:d3js that can be installed through XWiki's Extension Manager. How to integrate this example https://bl.ocks.org/mbostock/2d466ec3417722e3568cd83fc35338e3 in XWiki:

  • Install the d3js WebJar using the Extension Manager (use the advanced search with extension id org.webjars:d3js and version 5.5.0)
  • Create a new page and put this in its content:
{{html clean="false"}}
<svg width="960" height="500"></svg>
{{/html}}
  • Edit the page with the object editor and add a JavaScriptExtension object with this content:
require.config({
  paths: {
    d3: "$services.webjars.url('d3js', 'd3')"
  }
});

require(['d3'], function(d3) {
  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    angles = d3.range(0, 2 * Math.PI, Math.PI / 200);

  var path = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .attr("fill", "none")
    .attr("stroke-width", 10)
    .attr("stroke-linejoin", "round")
    .selectAll("path")
    .data(["cyan", "magenta", "yellow"])
    .enter().append("path")
    .attr("stroke", function(d) { return d; })
    .style("mix-blend-mode", "darken")
    .datum(function(d, i) {
      return d3.radialLine()
        .curve(d3.curveLinearClosed)
        .angle(function(a) { return a; })
        .radius(function(a) {
          var t = d3.now() / 1000;
          return 200 + Math.cos(a * 8 - i * 2 * Math.PI / 3 + t) * Math.pow((1 + Math.cos(a - t)) / 2, 3) * 32;
        });
    });

  d3.timer(function() {
    path.attr("d", function(d) {
      return d(angles);
    });
  });
});
  • Set the JSX object to load "On this page or on demand" and to be parsed. Thats it!
 Thanks to mflorea for contributing the example. 
Created by Oana Florea on 2019/01/21
   

Get Connected