Commit c34780f5 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[links] links showing properly now

parent 3af558a0
...@@ -2663,6 +2663,11 @@ var PS = {}; ...@@ -2663,6 +2663,11 @@ var PS = {};
return n.toString(); return n.toString();
}; };
exports.showNumberImpl = function (n) {
var str = n.toString();
return isNaN(str + ".0") ? str : str + ".0";
};
exports.showStringImpl = function (s) { exports.showStringImpl = function (s) {
var l = s.length; var l = s.length;
return "\"" + s.replace( return "\"" + s.replace(
...@@ -2697,12 +2702,14 @@ var PS = {}; ...@@ -2697,12 +2702,14 @@ var PS = {};
this.show = show; this.show = show;
}; };
var showString = new Show($foreign.showStringImpl); var showString = new Show($foreign.showStringImpl);
var showNumber = new Show($foreign.showNumberImpl);
var showInt = new Show($foreign.showIntImpl); var showInt = new Show($foreign.showIntImpl);
var show = function (dict) { var show = function (dict) {
return dict.show; return dict.show;
}; };
exports["show"] = show; exports["show"] = show;
exports["showInt"] = showInt; exports["showInt"] = showInt;
exports["showNumber"] = showNumber;
exports["showString"] = showString; exports["showString"] = showString;
})(PS); })(PS);
(function(exports) { (function(exports) {
...@@ -3384,16 +3391,18 @@ var PS = {}; ...@@ -3384,16 +3391,18 @@ var PS = {};
})))(Graphics_D3_Link.target(Graphics_D3_Link.linkLinkVertical)(function (d) { })))(Graphics_D3_Link.target(Graphics_D3_Link.linkLinkVertical)(function (d) {
return d.position; return d.position;
})))(Graphics_D3_Link.x(Graphics_D3_Link.linkLinkVertical)(function (v) { })))(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) { })))(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))(); 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) { 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 linkXScale(Data_Int.toNumber(v.position.value0)); 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))) + ")")));
})))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("cy")(function (v) { }))();
return 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))();
})))(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"))(); 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)(); return DOM_Simple_Console.log2("linkEl")(linkElSvg)();
}; };
......
...@@ -136,6 +136,7 @@ main = do ...@@ -136,6 +136,7 @@ main = do
>>= Axis.renderAxis timeAxis >>= Axis.renderAxis timeAxis
log2 "timeScale" timeScale log2 "timeScale" timeScale
-- http://using-d3js.com/05_08_links.html
let linkNodeData = [ let linkNodeData = [
{id: "D3", position: Tuple 2 0, parentPosition: Tuple 2 0} {id: "D3", position: Tuple 2 0, parentPosition: Tuple 2 0}
, {id: "Shapes", position: Tuple 1 1, parentPosition: Tuple 2 0} , {id: "Shapes", position: Tuple 1 1, parentPosition: Tuple 2 0}
...@@ -157,20 +158,34 @@ main = do ...@@ -157,20 +158,34 @@ main = do
linkGen <- Link.linkVertical linkGen <- Link.linkVertical
>>= Link.source (\d -> d.parentPosition) >>= Link.source (\d -> d.parentPosition)
>>= Link.target (\d -> d.position) >>= Link.target (\d -> d.position)
>>= Link.x (\{ position: Tuple x _ } -> linkXScale x) >>= Link.x (\(Tuple x _) -> linkXScale x)
>>= Link.y (\{ position: Tuple _ y } -> linkYScale y) >>= Link.y (\(Tuple _ y) -> linkYScale y)
linkElSvg <- Selection.rootSelect "#links" linkElSvg <- Selection.rootSelect "#links"
>>= Selection.append "svg" >>= Selection.append "svg"
>>= Selection.attr "width" 200.0 >>= Selection.attr "width" 200.0
>>= Selection.attr "height" 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.bindData linkNodeData
>>= Selection.join "circle" >>= Selection.enter
>>= Selection.attr' "cx" (\{ position: Tuple x _ } -> linkXScale (toNumber x)) >>= Selection.append "g"
>>= Selection.attr' "cy" (\{ position: Tuple _ y } -> linkYScale (toNumber y)) >>= Selection.attr' "transform" (\{ position: Tuple x y} -> "translate(" <> (show $ linkXScale $ toNumber x) <> ", " <> (show $ linkYScale $ toNumber y) <> ")")
>>= Selection.attr "r" "5" _ <- Selection.append "circle" linkG
>>= Selection.attr "r" 5
>>= Selection.attr "stroke" "black" >>= Selection.attr "stroke" "black"
>>= Selection.classed "circle" true >>= 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.selectAll "path" linkElSvg
>>= Selection.bindData linkNodeData >>= Selection.bindData linkNodeData
>>= Selection.join "path" >>= Selection.join "path"
......
{-
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" { name = "purescript-reactix-d3"
, dependencies = [ "console" , dependencies = [ "console"
, "d3" , "d3"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment