I am currently facing an issue while attempting to create a basic sankey diagram using d3 libraries loaded from requirejs. Previously, I had no problems rendering everything with the core d3 library. However, when trying to incorporate d3-sankey in this particular case, it does not seem to be working as expected. I have experimented with the shim configuration but still can't pinpoint the exact source of the problem. Whenever I try to run the provided code, I encounter the error 'Uncaught TypeError: d3.sankey is not a function'.
My suspicion is that the loading sequence of the libraries might be causing the issue, but I am uncertain about how to address it. Can anyone offer assistance?
Codepen - https://codepen.io/quirkules/pen/wYoXxQ
// define URLs
require.config({
paths: {
cloudflare: 'https://cdnjs.cloudflare.com/ajax/libs'
},
map: {
'*': {
'd3': 'cloudflare/d3/4.8.0/d3',
'd3-timer': 'cloudflare/d3-timer/1.0.5/d3-timer',
'd3-array': 'cloudflare/d3-array/1.2.2/d3-array',
'd3-collection': 'cloudflare/d3-collection/1.0.5/d3-collection',
'd3-interpolate': 'cloudflare/d3-interpolate/1.3.0/d3-interpolate',
'd3-color': 'cloudflare/d3-color/1.2.1/d3-color',
'd3-shape': 'cloudflare/d3-shape/1.2.0/d3-shape',
'd3-path': 'cloudflare/d3-path/1.0.5/d3-path',
'd3-sankey': 'cloudflare/d3-sankey/0.7.1/d3-sankey'
}
},
shim : {
d3 : {
exports : 'd3'
},
'd3-sankey' : {
deps: ['d3']
}
}
});
// load d3
require(['d3', 'd3-timer', 'd3-array', 'd3-collection', 'd3-interpolate', 'd3-color', 'd3-shape', 'd3-sankey'], function(d3) {
//****** CREATE DIVS ******//
// Add the divs to the DOM
$(document.body)
.append('<div id="header"></div>')
.append('<div id="chart"></div>')
.append('<div id="footer"></div>');
//add text to the divs
document.getElementById("header").innerHTML = '<b>Title</b>';
// set the dimensions and margins of the graph
var margin = { top: 20, right: 20, bottom: 40, left: 50 },
width = d3.select('#chart').node().getBoundingClientRect().width - margin.left - margin.right,
height = d3.select('#chart').node().getBoundingClientRect().height - margin.top - margin.bottom;
//
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var graph = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);
var path = graph.link();
var freqCounter = 1;
//****** END CREATE CHART ******//
});