Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
BARC’s The BI Survey 19 makes it official. BI users love Qlik. GET REPORT
Highlighted
Partner
Partner

Extension D3.js - Loading js files

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

Tags (3)
3 Replies
ErikWetterberg
Honored Contributor

Re: Extension D3.js - Loading js files

‌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/

Partner
Partner

Re: Extension D3.js - Loading js files

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 muchScreenshot_d3js_errors.png

ErikWetterberg
Honored Contributor

Re: Extension D3.js - Loading js files

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) {

It might depend on how the d3 addon is written if you can use the same solution in your extension.

Erik Wetterberg

https://extendingqlik.upper88.com/