[Pkg-javascript-commits] [d3-tip.js] 205/277: add documentation and examples for explicity targets

Thu Dec 8 06:57:31 UTC 2016

This is an automated email from the git hooks/post-receive script.

bhuvan-guest pushed a commit to branch master
in repository d3-tip.js.

commit b520932e2a0207f693f7625294f5484ba12cbab5
Author: Justin Palmer <justin at github.com>
Date:   Sat Dec 7 11:24:20 2013 -0800

    add documentation and examples for explicity targets
---
 docs/initializing-tooltips.md       |   2 +-
 docs/showing-and-hiding-tooltips.md |  13 +++-
 examples/explicit-target.html       | 145 ++++++++++++++++++++++++++++++++++++
 3 files changed, 158 insertions(+), 2 deletions(-)

diff --git a/docs/initializing-tooltips.md b/docs/initializing-tooltips.md
index a3c75d2..4e88ef9 100644
--- a/docs/initializing-tooltips.md
+++ b/docs/initializing-tooltips.md
@@ -24,4 +24,4 @@ var vis = d3.select(document.body)
   // Show and hide the tooltip
   .on('mouseover', tip.show)
   .on('mouseout', tip.hide)
-```
\ No newline at end of file
+```
diff --git a/docs/showing-and-hiding-tooltips.md b/docs/showing-and-hiding-tooltips.md
index 031f7f8..64fdee4 100644
--- a/docs/showing-and-hiding-tooltips.md
+++ b/docs/showing-and-hiding-tooltips.md
@@ -15,6 +15,17 @@ rect.on('mouseover', function(d) {
 })
 ```
 
+#### Explicit targets
+Sometimes you need to manually specify a target to act on.  For instance, maybe
+you want the tooltip to appear over a different element than the one that triggered
+a `mouseover` event.  You can specify an explicit target by passing an `SVGElement`
+as the last argument.
+
+``` javascript
+tip.show(data, target)
+```
+
+
 ### tip.hide
 Hide a tooltip
 
@@ -26,4 +37,4 @@ rect.on('mouseout', tip.hide)
 rect.on('mouseout', function(d) {
   tip.hide(d)
 })
-```
\ No newline at end of file
+```
diff --git a/examples/explicit-target.html b/examples/explicit-target.html
new file mode 100644
index 0000000..2c2b45c
--- /dev/null
+++ b/examples/explicit-target.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>d3.tip.js - Tooltips for D3</title>
+  <meta charset="utf-8" />
+  <title>Explicit Target</title>
+  <script type="text/javascript" src="../bower_components/d3/d3.js"></script>
+  <script type="text/javascript" src="../index.js"></script>
+  <script type="text/javascript">
+    data = [{"total":225,"days":[12,51,60,26,38,31,7]},{"total":279,"days":[42,33,34,72,61,12,25]},{"total":212,"days":[12,59,24,70,36,5,6]},{"total":335,"days":[17,43,38,58,67,72,40]},{"total":329,"days":[40,53,62,48,38,36,52]},{"total":234,"days":[15,25,41,66,35,37,15]},{"total":175,"days":[2,40,23,40,23,34,13]},{"total":308,"days":[20,22,63,55,51,66,31]},{"total":401,"days":[20,64,42,62,88,79,46]},{"total":214,"days":[24,27,25,48,38,28,24]},{"total":332,"days":[26,43,20,109,74,29,31]} [...]
+  </script>
+  <style type="text/css">
+  body {
+    padding: 40px;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 12px;
+    height: 1000px;
+  }
+
+  .d3-tip {
+    line-height: 1;
+    font-weight: bold;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 2px;
+  }
+
+  .d3-tip:after {
+    box-sizing: border-box;
+    display: inline;
+    font-size: 10px;
+    width: 100%;
+    line-height: 1;
+    color: rgba(0, 0, 0, 0.8);
+    content: "\25BC";
+    position: absolute;
+    text-align: center;
+  }
+
+  .d3-tip.n:after {
+    margin: -5px 0 0 0;
+    top: 100%;
+    left: 0;
+  }
+
+  .d3-tip span {
+    color: #ff00c7;
+  }
+
+  .domain {
+    display: none;
+  }
+
+  .axis line {
+    stroke-width: 1px;
+    stroke: #eee;
+    shape-rendering: crispedges;
+  }
+
+  .axis text {
+    fill: #888;
+  }
+
+  rect {
+    fill: #339cff;
+    fill-opacity: 0.7;
+  }
+
+  rect:hover {
+    fill-opacity: 1;
+  }
+
+  .legend {
+    fill: none;
+    stroke: #ccc;
+  }
+  </style>
+</head>
+<body>
+  <div id="graph">
+
+  </div>
+  <script type="text/javascript">
+    var tip = d3.tip()
+      .attr('class', 'd3-tip')
+      .html(function(d) { return '<span>' + d.total + '</span>' + ' entries' })
+      .offset([-12, 0])
+
+    var w = 800,
+        h = 300,
+        padt = 40, padr = 20, padb = 60, padl = 30,
+        x  = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
+        y  = d3.scale.linear().range([h, 0]),
+        yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
+        xAxis = d3.svg.axis().scale(x).orient('bottom')
+
+    vis = d3.select('#graph')
+      .append('svg')
+      .attr('width', w)
+      .attr('height', h + padt + padb)
+    .append('g')
+      .attr('transform', 'translate(' + padl + ',' + padt + ')')
+
+    var max = d3.max(data, function(d) { return d.total })
+    x.domain(d3.range(data.length))
+    y.domain([0, max])
+
+    vis.call(tip)
+    vis.append("g")
+      .attr("class", "y axis")
+      .call(yAxis)
+
+    legend = vis.append('rect')
+      .attr('width', 50)
+      .attr('height', 25)
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('class', 'legend')
+
+    vis.append("g")
+      .attr("class", "x axis")
+      .attr('transform', 'translate(0,' + h + ')')
+      .call(xAxis)
+      .selectAll('.x.axis g')
+        .style('display', function (d, i) { return i % 3 != 0  ? 'none' : 'block' })
+
+    var bars = vis.selectAll('g.bar')
+      .data(data)
+    .enter().append('g')
+      .attr('class', 'bar')
+      .attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
+
+    bars.append('rect')
+      .attr('width', function() { return x.rangeBand() })
+      .attr('height', function(d) { return h - y(d.total) })
+      .attr('y', function(d) { return y(d.total) })
+      .on('mouseout', tip.hide)
+      .on('mouseover', function(d) {
+        tip.show(d, legend.node())
+      })
+
+  </script>
+</body>
+</html>

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/d3-tip.js.git

