Skip to content

Instantly share code, notes, and snippets.

@emepyc

emepyc/README.md

Last active January 12, 2016 16:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emepyc/0687f42c1a3e4852f239 to your computer and use it in GitHub Desktop.
Save emepyc/0687f42c1a3e4852f239 to your computer and use it in GitHub Desktop.
Download ZIP
Tooltips on tracks
Raw
README.md

Example of TnT Board showing how to configure tooltips on track elements.

Raw
index.html
<!DOCTYPE html>
<head>
<!-- D3 -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- TnT -->
<link rel="stylesheet" href="http://tntvis.github.io/tnt.board/build/tnt.board.css" type="text/css" />
<script src="http://tntvis.github.io/tnt.board/build/tnt.board.min.js"></script>
<!-- TnT Tooltip -->
<link rel="stylesheet" href="http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
<script src="http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script>
var myBoard = tnt.board().from(20).to(500).max(1000);
var axis_track = tnt.board.track()
.height(20)
.color("white")
.display(tnt.board.track.feature.axis()
.orientation("top")
);
var block_track = tnt.board.track()
.label("my track")
.height(30)
.color("#FFCFDD")
.data (tnt.board.track.data.sync()
.retriever (function () {
return [
{
start : 200,
end : 350
}
];
})
)
.display(tnt.board.track.feature.block()
.color("blue")
.on("click", function (d) {
tnt.tooltip.table()
.width(120)
.call(this, {
header: "Block",
rows: [
{"label":"start", "value":d.start},
{"label":"end", "value":d.end}
]
});
})
);
myBoard(document.getElementById("mydiv"));
myBoard
.add_track(axis_track)
.add_track(block_track);
myBoard.start();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment