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}}
<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);
});
});
});
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!
