Skip to content
Browse files

css transitioning for highlight

  • Loading branch information...
1 parent a651d24 commit fb0be04bb56fedd0a86bbee84c40cc67a4fa7dfe @syntagmatic committed Nov 9, 2012
Showing with 21 additions and 6 deletions.
  1. +4 −0 README.md
  2. +9 −0 d3.parcoords.css
  3. +8 −6 d3.parcoords.js
View
4 README.md
@@ -265,6 +265,10 @@ parcoords.dimensions([3,1,2])
Clear the *layer*, which could be *"foreground"*, *"shadows"*, *"marks"*, *"extents"* or *"highlight"*.
+<a name="parcoords_canvas" href="#parcoords_canvas">#</a> parcoords.<b>canvas</b>
+
+An object containing the canvas elements.
+
<a name="parcoords_ctx" href="#parcoords_ctx">#</a> parcoords.<b>ctx</b>
An object containing the [canvas 2d rendering contexts](https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D). Use this to modify canvas rendering styles, except for the foreground stroke which is controlled by <a href="#parcoords_autoscale">parcoords.color()</a>.
View
9 d3.parcoords.css
@@ -23,3 +23,12 @@
stroke: #222;
shape-rendering: crispEdges;
}
+.parcoords canvas {
+ opacity: 1;
+ -moz-transition: opacity 0.3s;
+ -webkit-transition: opacity 0.3s;
+ -o-transition: opacity 0.3s;
+}
+.parcoords canvas.faded {
+ opacity: 0.25;
+}
View
14 d3.parcoords.js
@@ -23,10 +23,10 @@ d3.parcoords = function(config) {
// canvas data layers
["extents", "shadows", "marks", "foreground", "highlight"].forEach(function(layer) {
- ctx[layer] = selection
+ canvas[layer] = selection
.append("canvas")
- .attr("class", layer)
- [0][0].getContext("2d");
+ .attr("class", layer)[0][0];
+ ctx[layer] = canvas[layer].getContext("2d");
});
// svg tick and brush layers
@@ -57,7 +57,8 @@ d3.parcoords = function(config) {
line = d3.svg.line(),
axis = d3.svg.axis().orient("left").ticks(5),
g, // groups for axes, brushes
- ctx = {};
+ ctx = {},
+ canvas = {};
// side effects for setters
var side_effects = d3.dispatch.apply(this,d3.keys(__))
@@ -311,6 +312,7 @@ d3.parcoords = function(config) {
pc.xscale = xscale;
pc.yscale = yscale;
pc.ctx = ctx;
+ pc.canvas = canvas;
pc.g = function() { return g; };
// TODO
@@ -349,8 +351,7 @@ d3.parcoords = function(config) {
// highlight an array of data
pc.highlight = function(data) {
pc.clear("highlight");
- ctx.highlight.fillStyle = "rgba(255,255,255,0.8)";
- ctx.highlight.fillRect(-1,-1,w()+2,h()+2);
+ d3.select(canvas.foreground).classed("faded", true);
data.forEach(path_highlight);
events.highlight.call(this,data);
return this;
@@ -359,6 +360,7 @@ d3.parcoords = function(config) {
// clear highlighting
pc.unhighlight = function(data) {
pc.clear("highlight");
+ d3.select(canvas.foreground).classed("faded", false);
return this;
};

0 comments on commit fb0be04

Please sign in to comment.
Something went wrong with that request. Please try again.