Loading d3.js as a dependency into my Extension

[wallerjc]

Hi

I'm simply trying to load d3 into a Qlik Sense extension and running into issues, hoping someone can help as I'm sure it's relatively simple.

My template.html looks like this:

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    {{ html }}

    <div class="mydiv">

    </div>

</div>

My javascript code looks like the below:

define( ["qlik",

        "jquery",

        "text!./style.css",

        "text!./template.html",

        "./d3/d3",

    ],

    function (qlik, $, cssContent, template ) {'use strict';

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

    return {

   template: template,

   initialProperties : {

            qHyperCubeDef : {

                qDimensions : [],

                qMeasures : [],

                qInitialDataFetch : [{

                    qWidth : 10,

                    qHeight : 500

                }]

            }

        },

        definition : {

            type : "items",

            component : "accordion",

            items : {

                dimensions : {

                    uses : "dimensions",

                    min : 0

                },

                measures : {

                    uses : "measures",

                    min : 0

                },

                sorting : {

                    uses : "sorting"

                },

                settings : {

                    uses : "settings",

                    items : {

                        initFetchRows : {

                            ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",

                            label : "Initial fetch rows",

                            type : "number",

                            defaultValue : 500

                        }

                    }

                }

            }

        },

        support : {

            snapshot: true,

            export: true,

            exportData : true

        },

        paint: function ( ) {

            console.log("painting...");

            var svg = d3.select(".mydiv")

            .append("svg")

            .attr("width", width)

            .attr("height", height);

        },

        controller: ['$scope', function (/*$scope*/) {

        }]

    };

} );

and the error i get in the dev tools look like this: [SEE ATTACHMENT]

My folder structure is: [SEE ATTACHMENT]

What am I doing wrong? Why can't it see the d3 file?

thanks,

James.

[ErikWetterberg · Accepted solution]

Hi,

Try adding d3 as an argument to your function:

 function (qlik, $, cssContent, template , d3)

Hope this helps

Erik Wetterberg

[wallerjc]

Oh my word, thank you Erik for your sunday time! Fixed

[fabian3684386]

Hello, how can I load a custom version of d3 within the scope of the extension?

Qlik uses D3 in version 3 and suddenly this module import from a library packed via webpack stopped working for me:

const d3 = myCustomLibrary.d3;

yielding undefined, even though my module is loaded into the myCustomLibrary scope as a Module object:

d3: Module

Also, I noticed Qlik deploys the old version 3 of D3.js into my extension which I explicitly have to overwrite even when not defining d3 as an import, is there a reason behind this?