• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

D3.js library in CerberusX

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):

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! :rolleyes:;)
 
Bloody graphs :) l believe it would not be too hard to implement one of the graph layout algorithms in CX but to build a full featured library would be a pain in the ass. Even java in all its power doesn't have a single decent open-source graph visualisation framework and this fact allows commercial ones to thrive.
 
I am positive you could create wrapper functions and classes to interface with d3 but if SB can use it right away, i would use that instead and save yourself the headache
 
Back
Top Bottom