Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
morenoju
Partner - Specialist
Partner - Specialist

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

5 Replies
ErikWetterberg

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

morenoju
Partner - Specialist
Partner - Specialist
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 muchScreenshot_d3js_errors.png

ErikWetterberg

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/

Manoj_Prabu
Partner - Creator
Partner - Creator

Hi @morenoju 

Please check the below blog for the integration of D3 with Qlik sense Extension.  Its working fine for me.

How to include D3.js with Qlik sense extension? 

ajaykakkar93
Specialist III
Specialist III

Use this code for D3 with the attached D3.js file

define(["jquery", "css!./style.css", "./d3.v3.min"], function($, cssContent)

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting