[Pkg-javascript-commits] [d3-tip.js] 39/277: line and circle example

Thu Dec 8 06:57:14 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 b085f533b5839cc02c9d5a5d6e1de6844e1cce84
Author: Caged <justin at labratrevenge.com>
Date:   Tue Feb 7 15:03:00 2012 -0800

    line and circle example
---
 examples/nested-groups.html | 84 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/examples/nested-groups.html b/examples/nested-groups.html
index 5acfc4f..ba9c543 100644
--- a/examples/nested-groups.html
+++ b/examples/nested-groups.html
@@ -58,6 +58,12 @@
         stroke: #ddd;
         shape-rendering: crispedges;
       }
+
+      path.path {
+        fill: none;
+        stroke-width: 3px;
+        stroke: red;
+      }
     </style>
   </head>
   <body>
@@ -76,6 +82,84 @@
         .attr('class', 'd3-tip');
 
 
+  // CIRCLES HERE
+  (function() {
+    // Base vis layer
+    var vis = d3.select('#circles')
+      .append('svg')
+        .attr('width', w + (pl + pr))
+        .attr('height', h + pt + pb)
+        .attr('class', 'viz')
+      .append('g')
+        .attr('transform', "translate(" + pl + "," + pt + ")")
+
+    d3.json('data.json', function(data) {
+      var days = data[0].days,
+          max  = d3.max(data, function(d) { return d3.max(d.days) }),
+          h = 260,
+          x = d3.scale.linear().domain([0, days.length - 1]).range([0, w - pl -  pr]),
+          y = d3.scale.linear().domain([0, max]).range([h, 0]),
+          yAxis = d3.svg.axis().scale(y).orient("left").ticks(5).tickSize(-w + pr + pl);
+
+      vis.data([days])
+      vis.append("g")
+        .attr("class", "y axis")
+        .call(yAxis)
+
+      var path = d3.svg.line()
+        .interpolate('cardinal')
+        .x(function(d,i) { return x(i) })
+        .y(y)
+
+      vis.append("path")
+        .attr('class', 'path')
+        .attr('d', path)
+
+      var dots = vis.selectAll('g.dot')
+        .data(days)
+      .enter().append('g')
+        .attr('class', 'dot')
+        .attr('transform', function(d, i) { return "translate(" + x(i) + "," + y(d) + ")" })
+
+      dots.append('circle')
+        .attr('r', 4)
+        .on('mouseover', function(d) {
+          var rect = this.getBoundingClientRect(),
+              bbox = this.getBBox(),
+              // trans = this.getTransformToElement(),
+              scree = this.getScreenCTM(),
+              ctm   = this.getCTM(),
+              x = ctm.e,
+              y = ctm.f;
+
+          console.log(rect, bbox, scree, ctm)
+          linex.transition()
+            .attr('x1', x)
+            .attr('x2', x)
+
+          liney.transition()
+            .attr('y1', y)
+            .attr('y2',y)
+        })
+
+          // debugging stuff
+      var linex = vis.append('line')
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", 0)
+        .attr("y2", h)
+        .attr('class', 'rule')
+
+      var liney = vis.append('line')
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", w)
+        .attr("y2", 0)
+        .attr('class', 'rule')
+    })
+  })();
+
+  // BARS HERE
   (function() {
     // Base vis layer
     var vis = d3.select('#bars')

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

