[links] links showing properly now

example/index.js

@@ -2663,6 +2663,11 @@ var PS = {};
     return n.toString();
   };
 
+  exports.showNumberImpl = function (n) {
+    var str = n.toString();
+    return isNaN(str + ".0") ? str : str + ".0";
+  };
+
   exports.showStringImpl = function (s) {
     var l = s.length;
     return "\"" + s.replace(
@@ -2697,12 +2702,14 @@ var PS = {};
       this.show = show;
   };
   var showString = new Show($foreign.showStringImpl);
+  var showNumber = new Show($foreign.showNumberImpl);
   var showInt = new Show($foreign.showIntImpl);
   var show = function (dict) {
       return dict.show;
   };
   exports["show"] = show;
   exports["showInt"] = showInt;
+  exports["showNumber"] = showNumber;
   exports["showString"] = showString;
 })(PS);
 (function(exports) {
@@ -3384,16 +3391,18 @@ var PS = {};
       })))(Graphics_D3_Link.target(Graphics_D3_Link.linkLinkVertical)(function (d) {
           return d.position;
       })))(Graphics_D3_Link.x(Graphics_D3_Link.linkLinkVertical)(function (v) {
-          return linkXScale(v.position.value0);
+          return linkXScale(v.value0);
       })))(Graphics_D3_Link.y(Graphics_D3_Link.linkLinkVertical)(function (v) {
-          return linkYScale(v.position.value1);
+          return linkYScale(v.value1);
       }))();
       var linkElSvg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#links"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")(200.0)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")(200.0))();
-      Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.selectAll(".circle")(linkElSvg))(Graphics_D3_Selection.bindData(linkNodeData)))(Graphics_D3_Selection.join(Graphics_D3_Selection.joinableUpdate)("circle")))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("cx")(function (v) {
-          return linkXScale(Data_Int.toNumber(v.position.value0));
-      })))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("cy")(function (v) {
-          return linkYScale(Data_Int.toNumber(v.position.value1));
-      })))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("r")("5")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("black")))(Graphics_D3_Selection.classed(Graphics_D3_Selection.classedSelection)("circle")(true))();
+      var linkG = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.selectAll(".circle")(linkElSvg))(Graphics_D3_Selection.bindData(linkNodeData)))(Graphics_D3_Selection.enter))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableEnter)("g")))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("transform")(function (v) {
+          return "translate(" + (Data_Show.show(Data_Show.showNumber)(linkXScale(Data_Int.toNumber(v.position.value0))) + (", " + (Data_Show.show(Data_Show.showNumber)(linkYScale(Data_Int.toNumber(v.position.value1))) + ")")));
+      }))();
+      Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("circle")(linkG))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("r")(5)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("black")))(Graphics_D3_Selection.classed(Graphics_D3_Selection.classedSelection)("circle")(true))();
+      Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("text")(linkG))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingSelection)(function (v) {
+          return v.id;
+      })))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("x")(10)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("black")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("font-size")("0.5em"))();
       Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.selectAll("path")(linkElSvg))(Graphics_D3_Selection.bindData(linkNodeData)))(Graphics_D3_Selection.join(Graphics_D3_Selection.joinableUpdate)("path")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("d")(linkGen)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("fill")("none")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("black"))();
       return DOM_Simple_Console.log2("linkEl")(linkElSvg)();
   };

example/src/Main.purs

@@ -136,6 +136,7 @@ main = do
     >>= Axis.renderAxis timeAxis
   log2 "timeScale" timeScale
 
+  -- http://using-d3js.com/05_08_links.html
   let linkNodeData = [
       {id: "D3",       position: Tuple 2 0, parentPosition: Tuple 2 0}
     , {id: "Shapes",   position: Tuple 1 1, parentPosition: Tuple 2 0}
@@ -157,20 +158,34 @@ main = do
   linkGen <- Link.linkVertical
     >>= Link.source (\d -> d.parentPosition)
     >>= Link.target (\d -> d.position)
-    >>= Link.x (\{ position: Tuple x _ } -> linkXScale x)
-    >>= Link.y (\{ position: Tuple _ y } -> linkYScale y)
+    >>= Link.x (\(Tuple x _) -> linkXScale x)
+    >>= Link.y (\(Tuple _ y) -> linkYScale y)
   linkElSvg <- Selection.rootSelect "#links"
     >>= Selection.append "svg"
     >>= Selection.attr "width" 200.0
     >>= Selection.attr "height" 200.0
-  _ <- Selection.selectAll ".circle" linkElSvg
+  -- _ <- Selection.selectAll ".circle" linkElSvg
+  --   >>= Selection.bindData linkNodeData
+  --   >>= Selection.join "circle"
+  --   >>= Selection.attr' "cx" (\{ position: Tuple x _ } -> linkXScale (toNumber x))
+  --   >>= Selection.attr' "cy" (\{ position: Tuple _ y } -> linkYScale (toNumber y))
+  --   >>= Selection.attr "r" "5"
+  --   >>= Selection.attr "stroke" "black"
+  --   >>= Selection.classed "circle" true
+  linkG <- Selection.selectAll ".circle" linkElSvg
     >>= Selection.bindData linkNodeData
-    >>= Selection.join "circle"
-    >>= Selection.attr' "cx" (\{ position: Tuple x _ } -> linkXScale (toNumber x))
-    >>= Selection.attr' "cy" (\{ position: Tuple _ y } -> linkYScale (toNumber y))
-    >>= Selection.attr "r" "5"
+    >>= Selection.enter
+    >>= Selection.append "g"
+    >>= Selection.attr' "transform" (\{ position: Tuple x y} -> "translate(" <> (show $ linkXScale $ toNumber x) <> ", " <> (show $ linkYScale $ toNumber y) <> ")")
+  _ <- Selection.append "circle" linkG
+    >>= Selection.attr "r" 5
     >>= Selection.attr "stroke" "black"
     >>= Selection.classed "circle" true
+  _ <- Selection.append "text" linkG
+    >>= Selection.text' (\{ id } -> id)
+    >>= Selection.attr "x" 10
+    >>= Selection.attr "stroke" "black"
+    >>= Selection.attr "font-size" "0.5em"
   _ <- Selection.selectAll "path" linkElSvg
     >>= Selection.bindData linkNodeData
     >>= Selection.join "path"

spago.dhall

-{-
-Welcome to a Spago project!
-You can edit this file as you like.
-
-Need help? See the following resources:
-- Spago documentation: https://github.com/purescript/spago
-- Dhall language tour: https://docs.dhall-lang.org/tutorials/Language-Tour.html
-
-When creating a new Spago project, you can use
-`spago init --no-comments` or `spago init -C`
-to generate this file without the comments in this block.
--}
 { name = "purescript-reactix-d3"
 , dependencies = [ "console"
                  , "d3"