Example of inter-relationship between two track's data in TnT Board. In the example, the data in the first track is empty by definition, but the second track shares its data with the first track and calls its update method.
Last active
January 12, 2016 16:19
-
-
Save emepyc/1bfb0d95e418c706b9bf to your computer and use it in GitHub Desktop.
Mirror track
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <link rel="stylesheet" href="http://tntvis.github.io/tnt.board/build/tnt.board.css" type="text/css" /> | |
| <style> | |
| #mydiv { | |
| margin-top: 200px; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://tntvis.github.io/tnt.board/build/tnt.board.min.js"></script> | |
| <script src="mirror_track.js"></script> | |
| </head> | |
| <body> | |
| <div id="mydiv"></div> | |
| <script> | |
| mirror_track(document.getElementById("mydiv")); | |
| </script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var mirror_track = function (div) { | |
| var board = tnt.board().min(0).max(500).from(0).to(500).width(950); | |
| // Axis track | |
| var axis_track = tnt.board.track() | |
| .height(0) | |
| .color("white") | |
| .display(tnt.board.track.feature.axis() | |
| .orientation("top") | |
| ); | |
| // Mirror track -- mirrors the data in the data track below | |
| var mirror_track = tnt.board.track() | |
| .height(60) | |
| .color("white") | |
| .display(tnt.board.track.feature.pin() | |
| .domain([0.3, 1.2]) | |
| .color("blue") | |
| ); // No data defined for this track -- will use the data in pin_track | |
| // Data track1 | |
| var pin_track = tnt.board.track() | |
| .height(60) | |
| .color("white") | |
| .display(tnt.board.track.feature.pin() | |
| .domain([0.3, 1.2]) | |
| .color("red") | |
| ) | |
| .data(tnt.board.track.data.sync() | |
| .retriever (function () { | |
| // Data may be comming from a remote resource via tnt.board.track.data.async | |
| var data = [ | |
| { | |
| pos : 200, | |
| val : 0.5, | |
| label : "1" | |
| }, | |
| { | |
| pos : 355, | |
| val : 0.8, | |
| label : "2" | |
| }, | |
| { | |
| pos : 100, | |
| val : 0.3, | |
| label : "3" | |
| }, | |
| { | |
| pos : 400, | |
| val : 1, | |
| label : "4" | |
| } | |
| ]; | |
| var mirror_data = mirror_track.data(); // tnt.board.track.data.empty by default | |
| mirror_data.elements (data); | |
| mirror_track.display().update.call(mirror_track); | |
| return data; | |
| }) | |
| ); | |
| board | |
| .add_track([axis_track, pin_track, mirror_track]); | |
| board(div); | |
| board.start(); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment