Using D3.JS and the sankey plugin in a require.js module - javascript

I'm trying to build a requirejs module giving client code the options to render stuff with d3.js. The first plugin I want to use is a sankey diagram.
My module so far:
define(['d3'], function(ignore) {
console.log("bef", d3);
require(['sankey.js']);
console.log("aft", d3);
d3.sankey();
return {
...
d3: d3,
renderSankey: function(options) {
...
}
}
The sankey.js script uses the global d3 variable and adds the function sankey(). (I tried both btw, define(['d3'], function(ignore) and define(['d3'], function(d3), exactly the same result).
The error: TypeError: d3.sankey is not a function, no matter if I try to call it directly as the code shows or like this.d3.sankey() in the renderSankey function.
The console output says (both times, before and after the require(...) call:
sankey: d3.sankey()
No matter what I try, it won't work. I feel like I missed something JS specific about shadowing, but why is there a sankey function, when I console.log the object and a row later, when I try to call I get an error? What am I doing wrong?
info:
I'm using this inside a splunk html dashboard, this is maybe important...
I don't want the client code to import the dependicies (with about 100 plugins to come, this would be a pain)
When I just copy the content of the sankey.js into my module, everything works fine
/edit: Here is the Require configuration (given by the Splunk Dashboard)
require.config({
baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
waitSeconds: 0 // Disable require.js load timeout
});

The require call you are using to load sankey is asynchronous. It will launch the loading of sankey but by the time require returns, sankey is not loaded. You should change your code to:
define(['d3', 'sankey'], function (d3) {
d3.sankey();
I take it that d3 also leaks the symbol d3 in the global space but AMD modules should not rely on global symbols unless these are part of the runtime environment (e.g. window, document).
You also need to set your RequireJS configuration to make sankey dependent on d3 because the define above does not by itself ensure that d3 will load before sankey. So you need this in your configuration:
shim: {
sankey: ['d3']
}
This makes sankey dependent on d3. (Note that shim can only be used to affect the loading of files that are not proper AMD module. sankey does not call define to register itself, and thus is not a proper AMD module, and we can use shim for it.)
Also, module names should generally not have .js in them so when you want to load the plugin, load it as sankey, not sankey.js.

Okay, I think #Louis and I just misunderstood each other. This may be caused by my own stupidity, since I wasn't aware that a configuration of require.js can be done anywhere (and not only once in the root file). How ever, to still get the Splunk specific part I post this answer (instead of accepting Louis'):
I added a new app to my splunk environment to (a viz app). I actually configure the dependencies first (in the by other splunk apps loadable d3-viz module):
require.config({
paths: {
'd3': '../app/D3_Viz/d3', // d3.js
'sankey': '../app/D3_Viz/sankey', // sankey.js
'XYZ': 'all the paths go here'
},
shim: {
'sankey': ['d3'],
'XYZ': ['d3'],
// all the dependecies go here
}
});
define(['splunkjs/ready!', 'jquery', 'd3'],
function(mvc, $, ignore) {
var d3Vis = {
...
renderSankey: function(options) {
// load dependencies dynamically
require(['sankey'], function() {
// actually render things
});
},
renderXYZ: function(options) {
require(['XYZ'], function() {
...
});
},
...
}
}
return d3Vis;
All my dependencies can be configured in the viz-app (and not in the client code using the app, this has been my fundamental missunderstanding of require.js); the only thing to do is loading the app/viz as a whole (in this example in a HTML dashboard:
require([
"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/headerview",
"splunkjs/mvc/footerview",
...
"../app/D3_Viz/viz"
],
function(
mvc,
utils,
TokenUtils,
_,
$,
DashboardController,
HeaderView,
FooterView,
...
d3Viz
){
... splunk specific stuff
// No dependencies have to be configured
// in the client code
d3Viz.renderSankey({...});
}
);

Related

require.js require a module with index.js

So I'm trying to set up Typescript and Chutzpah for testing purposes. Typescript is set up to output in this format:
define(['require', 'exports', './someModule'], function(require, exports, someModule) {
//examplecode
});
Which works fine, the problem occurs when someModule is actually a directory with an index.js.
/app
app.js
/someModule
index.js
require.js is unable to resolve someModule in this way and the test fails.
Is there any way to tell require.js that this is a module?
RequireJS won't automatically check for the presence of index.js and load that as your module. You need to tell RequireJS that when you want to load someModule, it should load someModule/index. I'd set a map in my call to require.config:
require.config({
[ ... ]
map: {
'*': {
someModule: 'someModule/index',
}
},
});
You have to adjust the name you give there so that it is a path relative to your baseUrl. It's not clear from the information you give in your question what it should be.
(For the record, there's also a packages setting that you could probably tweak to do what you want but putting something packages says "this is a package", which is not what you appear to have here. So I would not use it for what you are trying to do.)
I didn't like the configuration in map either. The most simple way I accomplished this was writing a plugin for require.
Let's name the plugin mod, where it is to be used as mod!module/someModule, you can also call it index as in index!module/someModule, whatever suits you best.
define(function(require, exports, module) {
// loading module/someModule/index.js with `mod!`
var someModule = require('mod!module/someModule');
// whatever this is about ..
module.exports = { .. };
});
So lets assume you have paths set in require's configuration with some sort of project structure:
- app
- modules
- someModule/index.js // the index we want to load
- someModule/..
- someModule/..
- etc
- plugins
- mod.js // plugin to load a module with index.js
Requires config:
require.config({
paths: {
'module': 'app/modules',
// the plugin we're going to use so
// require knows what mod! stands for
'mod': 'app/plugins/mod.js'
}
});
To read all the aspects of how to write a plugin, read the docs at requirejs.org. The simplest version would be to just rewrite the name of the requested "module" you are attempting to access and pass it back to load.
app/plugins/mod.js
(function() {
define(function () {
function parse(name, req) {
return req.toUrl(name + '/index.js');
}
return {
normalize: function(name, normalize) {
return normalize(name);
},
load:function (name, req, load) {
req([parse(name, req)], function(o) {
load(o);
});
}
};
});
})();
This is not production code, it's just a simple way to demonstrate that requires config wasn't meant to solve problems like this.

How to load a d3-dependent script using RequireJS?

I'm trying to load d3-path using RequireJS. Looking at the minified d3-path source code, it looks like it's AMD-compliant since I see this in the first line:
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports):"function"==typeof define&&define.amd?define(["exports"],s):s(t.d3=t.d3||{})}
My index.html looks like
<script>
require.config({
paths: {
"d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min",
"d3-path": "https://d3js.org/d3-path.v1.min",
"underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min",
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"
}
});
</script>
And my JS file that I'm trying to load d3.path() looks like
require([
"d3",
"d3-path",
"underscore"
],
function(
d3,
d3_path,
_
) {
// d3, d3_path, and _ are defined
// but d3.path() isn't defined
});
I can use d3-path by doing d3_path.path() but I would ideally like to do d3.path(). However if I set both d3 and d3-path to d3 then d3-path overrides d3 and I lose the main d3 functions.
I'm also open to RequireJS best practices since I'm not sure if I'm using the best method. Thanks!
Preliminary note : you're trying to load d3 V3 with a V4 module, that's not going to mesh very well.
Onto your question : that's the way it is intended to work when you use the micro modules. You load isolated functionalities and combine them.
You only get a d3 global when you use the vanilla environments as said in the docs: try
require.config({
paths: {
"d3": "https://d3js.org/d3.v4.min"
}
});
require(['d3'], function(myd3) {
console.log(window.d3); // undefined
console.log(myd3); // d3 object
});
Note that if you load the whole d3 v4 library, you will get d3.path :
require(['d3'], function(myd3) {
console.log(myd3.path); // function
});
Finally, if you intend to use multiple micro modules, you could use a mapped configuration:
require.config({
paths: {
d3src: 'https://d3js.org'
},
map: {
'*': {
'd3': 'd3src/d3.v4.min',
'd3-selection': 'd3src/d3-selection.v1.min',
'd3-path': 'd3src/d3-path.v1.min',
}
}
});
// if you want to load the selection and the path modules
require(['d3-selection', 'd3-path'], function(selection, path) {
// ...
});
// if you want to load d3
require(['d3'], function(d3) {
// ...
});
In addition to nikoshr's answer on using d3 micro libraries: You should name the d3 modules in hyphens style, e.g. d3-selection, because some d3 libraries depend on other ones and require them in this syntax.
Moreover you can create your own d3 object in your modules, so you don't have to change your code and can use d3.path().
require(['d3-selection', 'd3-path'], function(d3Selection, d3Path) {
let d3 = Object.assign({}, d3Selection, d3Path);
d3.path();
});

requirejs unexpected behaviour

// conifg.js
require.config({
paths: {
'main': 'main',
'socketio': './libs/socket.io/socket.io',
'plotly': './libs/plotly/plotly-latest.min',
'renderDataToPlotly': './scripts/renderDataToPlotly',
'jquery': './libs/jquery/jquery-2.1.4.min',
'jqueryUI': './libs/jquery/jquery-ui-1.11.4.custom/jquery-ui.min',
'sliders': './scripts/sliders',
'makePlotlyWindowResponsive': './scripts/makePlotlyWindowResponsive'
},
shim: {
'jqueryUI': ['jquery']
}
});
require(['main']);
// main.js
define([
'jquery',
'jqueryUI',
'socketio',
'sliders',
'makePlotlyWindowResponsive',
'renderDataToPlotly'
],
function($, ui, io, sliders, makePlotlyWindowResponsive, renderDataToPlotly) {
//
}
);
// renderDataToPlotly.js and makePlotlyWindowResponsive.js
define(['plotly'], function() {
});
When I load the page I get this load order:
As you can see, makePlotlyWindowResponsive.js (1, on image) loads before plotly-latest.min.js (2, on image). As I understand requirejs mechanics, I would spect a Plotly is not defined error on makePlotlyWindowResponsive.js, but I'm not getting any. Everything works.
I want to understand requirejs and how it works.
Question 1: How there is not an error?
Question 2: That means that, despite load order, there is no error if files are loaded before page is fully loaded?
Thanks for your time!
The relative order you witnessed between plotly.min.js and the modules that depend on it is necessary. RequireJS has no reason to fetch plotly.min.js until makePlotlyWindowResponsive or renderDataToPlotly have been fetched.
Terminological note: I say "fetching (a module)" for the action of issuing an HTTP query on the network and I'll use "defining (a module)" for the action of running the factory function of a module. The term "loading" is too ambiguous.
What happens is:
You require main. So RequireJS fetches main.
RequireJS executes the define in main. The factory (the callback) cannot be run until the dependencies are defined themselves. So it initiates fetching the dependencies. This fetching can happen in any order. Among the dependencies are makePlotlyWindowResponsive and renderDataToPlotly.
RequireJS fetches makePlotlyWindowResponsive and renderDataToPlotly. (Their relative order does not matter.)
RequireJS executes the define of either makePlotlyWindowResponsive or renderDataToPlotly. This is where it learns that it must fetch the module plotly which resolves to ./libs/plotly/plotly-latest.min.js. Before this point, RequireJS has no idea that plotly will be needed. The fact that it is among the paths is not a sufficient condition to trigger its loading.
RequireJS fetches ./libs/plotly/plotly-latest.min.js.
When requirejs receives a script from the network, it runs that script. the require (or define?) function says "download these other scripts, then run them, and once you've got all their return values, run this function". So it waits for the other scripts to load and return their values before calling the function in this one. In short, the order in which they load may not be the same as the order in which their functions run.

Knockout with require.js - not looking for knockout in my configured 'paths' section

I’m developing a multi-page app, using requirejs to manage my javascript libs / dependencies.
My idea is that i'll have a main.js that holds the config, and then an .js file for each page that needs it, for example "register.js"
My require config is in javascripts/main.js
requirejs.config({
baseUrl: '/javascripts',
waitSeconds: 200,
paths: {
'async': 'lib/require.async',
'jquery': 'lib/jquery-1.7.2.min',
'knockout': 'lib/knockout-3.0.0'
});
I’ve got a knockout view model that looks like this:
javascripts/viewModels/userDetailsViewModel.js
define(['knockout'], function(ko) {
return function() {
var self = this;
self.name = ko.observable();
self.email = ko.observable();
});
My ‘entry point’ is javascripts/register.js
require(['./main', 'knockout', 'viewModels/userDetailsViewModel'], function(main, ko, userDetailsViewModel) {
ko.applyBindings(new userDetailsViewModel());
});
On my register.html page, i’ve got the script reference like this:
<script data-main="/javascripts/register" src="/javascripts/lib/require.js"></script>
When my page loads, I get these errors in the console:
GET http://localhost:3000/javascripts/knockout.js 404 (Not Found)
and
Uncaught Error: Script error for: knockout
I’m not sure why it’s looking for knockout.js - I’ve specified knockout in the paths section of my config, to look in lib/knockout-3.0.0
My dir structure is:
javascripts/
Most of my pages js files go here
javascripts/viewModels
Has knockout viewmodels
javascripts/lib
Contains knockout, jquery, requirejs etc...
The problem is that RequireJS will execute the call require(['./main', 'knockout', 'viewModels/userDetailsViewModel'] without a configuration. Yes, ./main is listed before knockout but there is no order guarantee between the dependencies passed in a single require call. RequireJS may load ./main first, or knockout first. And even if ./main were loaded first by this specific call, I believe it would not have any impact on how the other modules loaded by this call would load. That is, I think this require would operate on the basis of the configuration that existed at the time it was called, and that any configuration changes caused by the modules it loads would take effect only for subsequent require calls.
There are many ways to fix this. This should work:
require(['./main', function(main) {
require(['knockout', 'viewModels/userDetailsViewModel'], function(ko, userDetailsViewModel) {
ko.applyBindings(new userDetailsViewModel());
});
});
Or you might want to restructure your files and what you pass to data-main so that your requirejs.config is loaded and executed before your first require call. Here's an example of restructuring. Change your entry point to be /javascripts/main.js:
<script data-main="/javascripts/main.js" src="/javascripts/lib/require.js"></script>
Change /javascripts/main.js so that it contains:
requirejs.config({
baseUrl: '/javascripts',
waitSeconds: 200,
paths: {
'async': 'lib/require.async',
'jquery': 'lib/jquery-1.7.2.min',
'knockout': 'lib/knockout-3.0.0'
});
require(['knockout', 'viewModels/userDetailsViewModel'], function(ko, userDetailsViewModel) {
ko.applyBindings(new userDetailsViewModel());
});
And remove /javascripts/register.js. This would be one way to do it. However, it is hard for me to tell whether this would be what you want in your specific project, because I do not know the whole project. The way to restructure for your specific project really depends on what other pages might use RequireJS, what information is common to all pages, what is specific to each page, whether you use a template system to produce HTML, etc.

RequireJS plugin: load timeouts experienced when using plugin

Using RequireJS I'm building an app which make extensive use of widgets. For each widget I have at least 3 separate files:
request.js containing code for setting up request/response handlers to request a widget in another part of my application
controller.js containing handling between model and view
view.js containing handling between user and controller
Module definition in request.js:
define(['common/view/widget/entity/term/list/table/controller'],
function(WidgetController) { ... });
Module definition in controller.js:
define(['common/view/widget/entity/term/list/table/view'],
function(WidgetView) { ... });
Module definition of view.js is:
define(['module','require'],function(module,require) {
'use strict';
var WidgetView = <constructor definition>;
return WidgetView;
});
I have lots of these little situations as above in the case of widgets I have developed. What I dislike is using the full path every time when a module is requiring another module and both are located in the same folder. I'd like to simply specify as follows (assuming we have a RequireJS plugin which solves this for us):
define(['currentfolder!controller'],
function(WidgetController) { ... });
For this, I have written a small plugin, as I couldn't find it on the web:
define({
load: function (name, parentRequire, onload, config) {
var path = parentRequire.toUrl('.').substring(config.baseUrl.length) + '/' + name;
parentRequire([path], function (value) {
onload(value);
});
}
});
As you might notice, in its basic form it looks like the example of the RequireJS plugins documentation.
Now in some cases, the above works fine (e.g. from the request.js to the controller.js), but in other cases a load timeout occurs (from controller.js to view.js). When I look at the paths which are generated, all are proper RequireJS paths. Looking at the load timeouts, the following is logged:
Timestamp: 13-09-13 17:27:10
Error: Error: Load timeout for modules: currentfolder!view_unnormalized2,currentfolder!view
http://requirejs.org/docs/errors.html#timeout
Source File: http://localhost/app/vendor/requirejs/require.js?msv15z
Line: 159
The above log was from a test I did with only loading the view.js from controller.js using currentfolder!view in the list of modules in the define statement. Since I only requested currentfolder!view once, I'm confused as to why I both see currentfolder!view_unnormalized2 and currentfolder!view in the message.
Any idea as to why this might be happening?
My answer may not answer your primary questions, but it will help you achieve what you're trying to do with your plugin.
In fact, Require.js support relative paths for requiring modules when using CommonJS style. Like so:
define(function( require, exports, module ) {
var relativeModule = require("./subfolder/module");
module.exports = function() {
console.log( relativeModule );
};
});

Categories