2 Replies Latest reply: Oct 1, 2017 5:17 AM by James Waller RSS

    Loading d3.js as a dependency into my Extension

    James Waller

      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.