How to integrate d3js and XWiki?

Last modified by Oana Florea on 2019/01/21

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. 

   

Get Connected