zxretrosoft
Member
- Joined
- Jul 1, 2017
- Messages
- 32
Hello friends,
I have one question. Can I work with the JS library D3.js in MonkeyX / CerberusX ?
This is homepage:
https://d3js.org
There is e.g. this example:
http://bl.ocks.org/mbostock/1153292
Of course, I have own data. If I want to do it in SpiderBasic, I will do it this way. That's my code (SB):
And this is output:
http://zxretrosoft.wz.cz
But now, I would do the same thing in MonkeyX / CerberusX. Is this possible?
Thank you very much in advance!
I have one question. Can I work with the JS library D3.js in MonkeyX / CerberusX ?
This is homepage:
https://d3js.org
There is e.g. this example:
http://bl.ocks.org/mbostock/1153292
Of course, I have own data. If I want to do it in SpiderBasic, I will do it this way. That's my code (SB):
Code:
DeclareModule D3Js
Global IsInitialized
Declare Init(Callback)
Declare Gadget(Gadget, x, y, Width, Height, Flags = 0)
Declare GetSvg(Gadget)
EndDeclareModule
Module D3Js
Macro GetSelector
! var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
EndMacro
Procedure Init(Callback)
Protected CSS.s = "<style>" +
" .link {" +
" fill: none;" +
" stroke: #666;" +
" stroke-width: 1.5px;" +
" }" +
" #licensing {" +
" fill: green;" +
" }" +
" .link.licensing {" +
" stroke: green;" +
" }" +
" .link.resolved {" +
" stroke-dasharray: 0,2 1;" +
" }" +
" circle {" +
" fill: #ccc;" +
" stroke: #333;" +
" stroke-width: 1.5px;" +
" }" +
" text {" +
" font: 10px sans-serif;" +
" pointer-events: none;" +
" text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;" +
" }" +
"</style>"
! $('head').append($(v_css));
! require(["//d3js.org/d3.v3.min.js"],
! function(dThree) {
IsInitialized = #True
! window.d3=dThree;
! v_callback();
! }
! );
EndProcedure
Procedure Gadget(Gadget, x, y, Width, Height, Flags = 0)
If Gadget = #PB_Any
Gadget = ContainerGadget(Gadget, x, y, Width, Height, Flags)
Else
ContainerGadget(Gadget, x, y, Width, Height, Flags)
EndIf
CloseGadgetList()
GetSelector
! selector.append($("<svg id='d3_svg_g" + v_gadget + "' style='width:100%;height:100%' />"));
ProcedureReturn Gadget
EndProcedure
Procedure GetSvg(Gadget)
! return d3.select("#d3_svg_g" + v_gadget);
EndProcedure
EndModule
CompilerIf #PB_Compiler_IsMainFile
Procedure Main()
OpenWindow(0, 10, 10, 1200, 600, "D3JsGadget()", #PB_Window_ScreenCentered)
Protected GadgetWidth = 1180
Protected GadgetHeight = 580
D3Js::Gadget(0,10,10,GadgetWidth,GadgetHeight,#PB_Container_Flat)
Protected SVG = D3Js::GetSvg(0)
! var links = [
! {source: "Uherské Hradiště", target: "Babice", type: "suit"},
! {source: "Uherský Brod", target: "Bánov", type: "suit"},
! {source: "Kroměříž", target: "Bařice-Velké Těšany", type: "suit"},
! {source: "Otrokovice", target: "Bělov", type: "suit"},
! {source: "Kroměříž", target: "Bezměrov", type: "suit"},
! {source: "Uherské Hradiště", target: "Bílovice", type: "suit"},
! {source: "Luhačovice", target: "Biskupice", type: "suit"},
! {source: "Bystřice pod Hostýnem", target: "Blazice", type: "suit"},
! {source: "Luhačovice", target: "Bohuslavice nad Vláří", type: "suit"},
! {source: "Zlín", target: "Bohuslavice u Zlína", type: "suit"},
! {source: "Uherský Brod", target: "Bojkovice", type: "suit"},
! {source: "Uherské Hradiště", target: "Boršice", type: "suit"},
! {source: "Uherské Hradiště", target: "Boršice u Blatnice", type: "suit"},
! {source: "Holešov", target: "Bořenovice", type: "suit"},
! {source: "Valašské Meziříčí", target: "Branky", type: "suit"},
! {source: "Vizovice", target: "Bratřejov", type: "suit"},
! {source: "Valašské Klobouky", target: "Brumov-Bylnice", type: "suit"},
! {source: "Bystřice pod Hostýnem", target: "Brusné", type: "suit"},
! {source: "Kroměříž", target: "Břest", type: "suit"},
! {source: "Uherské Hradiště", target: "Břestek", type: "suit"},
! {source: "Zlín", target: "Březnice", type: "suit"},
! {source: "Uherské Hradiště", target: "Březolupy", type: "suit"},
! {source: "Vizovice", target: "Březová1", type: "suit"},
! {source: "Uherský Brod", target: "Březová2", type: "suit"},
! {source: "Zlín", target: "Březůvky", type: "suit"},
! {source: "Uherské Hradiště", target: "Buchlovice", type: "suit"},
! {source: "Bystřice pod Hostýnem", target: "Bystřice pod Hostýnem", type: "suit"},
! {source: "Uherský Brod", target: "Bystřice pod Lopeníkem", type: "suit"},
! {source: "Vsetín", target: "Bystřička", type: "suit"},
! {source: "Kroměříž", target: "Cetechovice", type: "suit"},
! {source: "Uherské Hradiště", target: "Částkov", type: "suit"},
! {source: "Vizovice", target: "Dešná", type: "suit"},
! {source: "Zlín", target: "Dobrkovice", type: "suit"},
! {source: "Rožnov pod Radhoštěm", target: "Dolní Bečva", type: "suit"},
! {source: "Luhačovice", target: "Dolní Lhota", type: "suit"},
! {source: "Uherský Brod", target: "Dolní Němčí", type: "suit"},
! {source: "Zlín", target: "Doubravy", type: "suit"},
! {source: "Valašské Klobouky", target: "Drnovice", type: "suit"},
! {source: "Uherský Brod", target: "Drslavice", type: "suit"},
! {source: "Zlín", target: "Držková", type: "suit"},
! {source: "Kroměříž", target: "Dřínov", type: "suit"},
! {source: "Vsetín", target: "Francova Lhota", type: "suit"},
! {source: "Zlín", target: "Fryšták", type: "suit"},
! {source: "Vsetín", target: "Halenkov", type: "suit"},
! {source: "Otrokovice", target: "Halenkovice", type: "suit"}
! ];
! var nodes = {};
! // Compute the distinct nodes from the links.
! links.forEach(function(link) {
! link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
! link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
! });
! var force = d3.layout.force()
! .nodes(d3.values(nodes))
! .links(links)
! .size([v_gadgetwidth, v_gadgetheight])
! .linkDistance(100)
! .charge(-70)
! .on("tick", tick)
! .start();
! // Per-type markers, as they don't inherit styles.
! v_svg.append("defs").selectAll("marker")
! .data(["suit", "licensing", "resolved"])
! .enter().append("marker")
! .attr("id", function(d) { return d; })
! .attr("viewBox", "0 -5 10 10")
! .attr("refX", 10)
! .attr("refY", -1.5)
! .attr("markerWidth", 6)
! .attr("markerHeight", 6)
! .attr("orient", "auto")
! .append("path")
! .attr("d", "M0,-5L10,0L0,5");
! var path = v_svg.append("g").selectAll("path")
! .data(force.links())
! .enter().append("path")
! .attr("class", function(d) { return "link " + d.type; })
! .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
! var circle = v_svg.append("g").selectAll("circle")
! .data(force.nodes())
! .enter().append("circle")
! .attr("r", 7) // velikost kuličky
! .call(force.drag);
! var text = v_svg.append("g").selectAll("text")
! .data(force.nodes())
! .enter().append("text")
! .attr("x", 8)
! .attr("y", ".31em")
! .text(function(d) { return d.name; });
! // Use elliptical arc path segments to doubly-encode directionality.
! function tick() {
! path.attr("d", linkArc);
! circle.attr("transform", transform);
! text.attr("transform", transform);
! }
! function linkArc(d) {
! var dx = d.target.x - d.source.x,
! dy = d.target.y - d.source.y,
! dr = Math.sqrt(dx * dx + dy * dy);
! return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 1 0,1 " + d.target.x + "," + d.target.y;
! }
! function transform(d) {
! return "translate(" + d.x + "," + d.y + ")";
! }
EndProcedure
D3Js::Init(@Main())
CompilerEndIf
And this is output:
http://zxretrosoft.wz.cz
But now, I would do the same thing in MonkeyX / CerberusX. Is this possible?
Thank you very much in advance!