d3js : Uncaught ReferenceError: d3 is not defined

Using Javascript from SpiderBasic
User avatar
Arbrakaan
Posts: 91
Joined: Mon Feb 24, 2014 10:54 pm
Location: Geneva
Contact:

d3js : Uncaught ReferenceError: d3 is not defined

Post by Arbrakaan »

Hi all,

I want to use d3js on my Spider Basic project, but I can't load correctly the library.

I tested with CDN and local library, but I get always the "d3 is not defined"...

What I'am doing wrong ?

This is the right ways to achieve that ?

Thanks for the help :)

Arbrakaan

Code: Select all

Enumeration
  #d3JS
EndEnumeration

Procedure lxl_SetGadgetID(gadget)
  Protected id.s
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "lxl_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
EndProcedure




; Load d3js  -------------------------------------------->

    !var d3js = document.createElement('script');
    !d3js.type = 'text/javascript';
    !d3js.src = 'http://d3js.org/d3.v4.js';
    !d3js.charset = 'utf-8';
    !var HeadElement = document.getElementsByTagName('head')[0];
    ;!HeadElement.appendChild(d3js);
    ;!document.getElementsByTagName('head')[0].insertBefore(HeadElement, document.getElementsByTagName('head')[0].childNodes[0]);
    !HeadElement.insertBefore(d3js, HeadElement.childNodes[4]);
    
; Load d3js  <--------------------------------------------
    
    
    
    
     Macro lxl_d3js_histogram(lxl_gadget, lxl_x, lxl_y, lxl_Width, lxl_Height)
   
   ContainerGadget(lxl_gadget, lxl_x, lxl_y, lxl_Width, lxl_Height)
   lxl_setGadgetID(lxl_gadget)
   
   gadgetid = lxl_gadget
   gadget_x = lxl_x
   gadget_y = lxl_y
   gadget_w = lxl_Width
   gadget_h = lxl_Height
   
   
   !var d3js = document.createElement("div");
   !d3js.id = 'lxl_d3js_'+v_gadgetid;
   !var ParentElement = document.getElementById("lxl_"+v_gadgetid);
   !ParentElement.innerHTML = "";
   !console.log(ParentElement)
   !ParentElement.appendChild(d3js);
   
   
   
   
!window.addEventListener('load', function() {   

!// set the dimensions And margins of the graph
!var margin = {top: 10, right: 30, bottom: 30, left: 60},
    !width = 460 - margin.left - margin.right,
    !height = 400 - margin.top - margin.bottom;
!// append the svg object To the body of the page
!var svg = d3.Select('#lxl_d3js_'+v_gadgetid)
  !.append("svg")
    !.attr("width", width + margin.left + margin.right)
    !.attr("height", height + margin.top + margin.bottom)
  !.append("g")
    !.attr("transform",
          !"translate(" + margin.left + "," + margin.top + ")");
!//Read the Data
!d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/connectedscatter.csv",
  !// When reading the csv, I must format variables:
  !function(d){
    !return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  !},
  !// Now I can use this dataset:
  !function(Data) {
    !// Add X axis --> it is a date format
    !var x = d3.scaleTime()
      !.domain(d3.extent(Data, function(d) { return d.date; }))
      !.range([ 0, width ]);
    !svg.append("g")
      !.attr("transform", "translate(0," + height + ")")
      !.call(d3.axisBottom(x));
    !// Add Y axis
    !var y = d3.scaleLinear()
      !.domain( [8000, 9200])
      !.range([ height, 0 ]);
    !svg.append("g")
      !.call(d3.axisLeft(y));
    !// Add the line
    !svg.append("path")
      !.datum(Data)
      !.attr("fill", "none")
      !.attr("stroke", "#69b3a2")
      !.attr("stroke-width", 1.5)
      !.attr("d", d3.line()
        !.x(function(d) { return x(d.date) })
        !.y(function(d) { return y(d.value) })
        !)
    !// Add the points
    !svg
      !.append("g")
      !.selectAll("dot")
      !.Data(Data)
      !.enter()
      !.append("circle")
        !.attr("cx", function(d) { return x(d.date) } )
        !.attr("cy", function(d) { return y(d.value) } )
        !.attr("r", 5)
        !.attr("fill", "#69b3a2")
   !})
        
        
        
!})
EndMacro

lxl_d3js_histogram(#d3JS, 10, 10, 450, 520)