Extension D3.js - Loading js files - Qlik Community

Ask a Question

Hi,

I'm working in an extension called "the slider" and it seems like I'm not being able to import the js files I want to use.

I want to work with a D3.js visualization that has this header:

<script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script> <script src="https://unpkg.com/d3-simple-slider@0.1.2/build/d3-simple-slider.js"></script

If I download those three files and I place them in C:\Users\MyUser\Documents\Qlik\Sense\Extensions\theslider

How should my define look? It thought it would be

define(["jquery",

"text!./theslider.css",

"text!./d3.v4.min.js",

'text!./d3-simple-slider.js",

"text!./lodash.min.js"

function($, cssContent) {

'use strict';

$("<style>").html(cssContent).appendTo("head");

My code later fails when doing

var slider = d3Slider.sliderHorizontal()

Seems to me that I'm not being able to load the resources correctly? Do you know why?

Thanks

5 Replies

‌Hi,

You should not use the text plugin for js files, and drop the file extension, so it should be ’./d3.v4.min’ etc.

You might also need to return the modules to your extension, so:

function($,cssContent,d3,d3slider)

Do you really need lodash?

Erik Wetterberg

https://extendingqlik.upper88.com/

Qlik Sense extensions, mashups, integrations and APIs
Blog Extending Qlik

Author

Hi Erik,

Thanks for your response. I've tried what you said, but I still have errors (screenshot attached).

This is how my code starts:

define(["jquery",

"text!./theslider.css",

"./d3.v4.min",

"./d3-simple-slider",

"./d3"

function($, cssContent, d3, d3slider) {

'use strict';

$("<style>").html(cssContent).appendTo("head");

return {

initialProperties : {

version: 1.0,

qHyperCubeDef : {

qDimensions : [],

qMeasures : [],

qInitialDataFetch : [{

qWidth : 1,

qHeight : 1000

}]

}

Do you know what the errors mean by any chance?

Thanks much

Hi,

Perhaps you should take a look at another extension that also uses d3, for example the WordCloud extension. It loads d3 plus an addon module in this file:

https://github.com/cleveranjos/br.com.clever.wordcloud/blob/master/extension/br.com.clever.wordcloud...

The relevant lines are:




define([



   "qlik", 



   "jquery", 



   "./d3.min", 



   "./d3.layout.cloud", 



   "./br.com.clever.wordcloud.support", 



   "css!./styles.css"



], function (qlik, $, d3) {