[Pkg-javascript-commits] [d3-tip.js] 17/277: stem added to top orientation

Thu Dec 8 06:57:12 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 566f6f71aebd100aeb946893fd5d0d3594f709f4
Author: Justin Palmer <justin at labratrevenge.com>
Date:   Mon Jan 9 07:16:15 2012 -0800

    stem added to top orientation
---
 examples/line.html | 15 ++++++++-------
 src/d3.tip.js      | 25 ++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/examples/line.html b/examples/line.html
index 257d231..4918882 100644
--- a/examples/line.html
+++ b/examples/line.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Crimean War</title>
+    <title>Lines</title>
     <script type="text/javascript" src="../vendor/d3.js"></script>
     <script type="text/javascript" src="../vendor/d3.layout.js"></script>
     <script type="text/javascript" src="../src/d3.tip.js"></script>
     <style type="text/css">
-      .d3-tip {
+      .d3-tip path, .d3-tip rect {
         fill: #c00;
         font-weight: bold;
       }
@@ -24,7 +24,7 @@
         shape-rendering: crispedges;
       }
 
-      path {
+      g.line path {
         fill: none;
         stroke-width: 2px;
       }
@@ -45,9 +45,9 @@
       max   = d3.max(data, function(d) { return d3.max(d) }),
       linex, liney,
       tip = d3.svg.tip()
-        .orient('bottom')
-        .padding(5)
-        .offset([20, -20])
+        .orient('top')
+        .padding(4)
+        .offset([20, 20])
         .text(function(d) { return d; })
         .attr('class', 'd3-tip');
 
@@ -65,9 +65,10 @@
       .attr('transform', "translate(" + pl + "," + pt + ")")
  
   // add path layers to their repesctive group
-  var paths = vis.selectAll('path.line')
+  var paths = vis.selectAll('g.line')
     .data(data)
   .enter().append("g")
+    .attr('class', 'line')
 
   paths.append('path')
     .attr("d", d3.svg.line().x(function(d,i) { return x(i) }).y(y).interpolate('cardinal'))
diff --git a/src/d3.tip.js b/src/d3.tip.js
index 4650933..b3c7108 100644
--- a/src/d3.tip.js
+++ b/src/d3.tip.js
@@ -13,7 +13,7 @@ d3.svg.tip = function() {
     var tipOffset = offset.apply(this, arguments),
         tipText   = text.apply(this, arguments),
         container = d3.select(node),
-        x, y;
+        x, y, stem, backingRect, containerRect;
     
     // Elements and Bounds
     var doc        = d3.select(this.ownerSVGElement),
@@ -37,15 +37,26 @@ d3.svg.tip = function() {
     backing.attr('width', valRect.width).attr('height', valRect.height).attr('rx', cornerRadius).attr('ry', cornerRadius)
     val.attr('dx', valRect.width / 2).attr('dy', valRect.height / 2)
 
-    var backingRect = backing.node().getBBox();
+    backingRect = backing.node().getBBox();
 
     switch(orient) {
       case 'top':
-        x = targetRect.x + (targetRect.width / 2) - (backingRect.width / 2) + tipOffset[0];
-        y = targetRect.y - backingRect.height + tipOffset[1];
+        stem = container.append('path')
+          .attr('d', d3_svg_stem())
+          .attr('transform', 'translate(' + (backingRect.width / 2) + ',' + backingRect.height + ')');
+                  
+        containerRect = container.node().getBBox()
+
+        x = targetRect.x + (targetRect.width / 2) - (containerRect.width / 2) + tipOffset[0];
+        y = targetRect.y - containerRect.height + tipOffset[1];
         break;
       case 'bottom':
-        x = targetRect.x + (targetRect.width / 2) - (backingRect.width / 2) + tipOffset[0];
+        // stem = d3.svg.symbol().type('triangle-down').size(stemSize);
+        // stem = d3.select(make('path')).attr('d', stem);
+        // container.node().appendChild(stem.node())
+        var containerRect = container.node().getBBox()
+
+        x = targetRect.x + (targetRect.width / 2) - (containerRect.width / 2) + tipOffset[0];
         y = targetRect.y + targetRect.height - tipOffset[1];
         break;
     }
@@ -104,6 +115,10 @@ d3.svg.tip = function() {
     return ' ';
   }
 
+  function d3_svg_stem() {
+    return d3.svg.symbol().type(orient == 'top' ? 'triangle-down' : 'triangle-up').size(stemSize);
+  }
+
   tip.attr = function(n, v) {
     d3.select(node).attr(n, v)
     return tip;

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

