Commit c34780f5 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[links] links showing properly now

parent 3af558a0
......@@ -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)();
};
......
......@@ -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"
......
{-
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"
......
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