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)