events for getter/setters

README.md

@@ -118,6 +118,8 @@ Exposes the public state of parallel coordinates. Useful for debugging in a Java
 
 The design of this object is experimental and contributed by Ziggy Jonsson. Read more at this [d3-js mailing list discussion](https://groups.google.com/forum/?fromgroups=#!topic/d3-js/F2IspJnDbEs).
 
+When the public state is updated through a method, an <a href="#parcoords_on">event</a> will fire.
+
 <a name="parcoords_createAxes" href="#parcoords_createAxes">#</a> parcoords.<b>createAxes</b>()
 
 Create static SVG axes with dimension names, ticks, and labels.
@@ -216,7 +218,17 @@ An object containing the [canvas 2d rendering contexts](https://developer.mozill
 
 <a name="parcoords_on" href="#parcoords_on">#</a> parcoords.<b>on</b>(*event*, *callback*)
 
-* render
-* resize
-* highlight
-* brush
+Trigger a callback when an event fires. The value of *this* in the callback refers to parcoords. The data passed into the callback depends on the event.
+
+* *render* returns no data
+* *resize* returns an object containing the width, height and margin
+* highlight returns the highlighted data
+* brush returns the brushed data
+
+When values in <a href="#parcoords___">parcoords.__</a> are updated through methods, an event of the same name fires (except *height*, *width* and *margin* which fire *resize*). The data passed into the callback is an object containing the new value, *value*, and the old value, *previous*.
+
+* dimensions
+* data
+* color
+* composite
+* alpha

index.html

@@ -46,7 +46,7 @@
     text-align: center;
   }
 </style>
-<a href="https://github.com/syntagmatic/parallel-coordinates"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+<a href="https://github.com/syntagmatic/parallel-coordinates"><img style="position: absolute; top: 0; right: 0; border: 0;" src="forkme.png" alt="Fork me on GitHub"></a>
 <h1>Parallel Coordinates <small>(beta)</small></h1>
 <p>An open-source framework for visualizing multi-dimensional spaces</p>
 <em>Why should I be interested in multi-dimensional space?</em>

parcoords.js

@@ -1,24 +1,12 @@
-d3.getset = function(_)  {
-  var self = this
-  Object.keys(_).forEach(function(key) {   
-    self[key] = function(x) {
-      if (!arguments.length) return _[key];
-      _[key] = x;
-      return self;
-    }
-  });
-}
-
 d3.parcoords = function(config) {
-  // an experimental object suggested by Ziggy Jonsson
   var __ = {
     dimensions: [],
     data: [],
     width: 600,
     height: 300,
     margin: { top: 24, right: 0, bottom: 12, left: 0 },
     color: "#069",
-    compositing: "source-over",
+    composite: "source-over",
     alpha: "0.7"
   };
 
@@ -50,7 +38,7 @@ d3.parcoords = function(config) {
     return pc;
   };
 
-  var events = d3.dispatch("render", "resize", "highlight", "brush"),
+  var events = d3.dispatch.apply(this,["render", "resize", "highlight", "brush"].concat(d3.keys(__))),
       w = function() { return __.width - __.margin.right - __.margin.left; },
       h = function() { return __.height - __.margin.top - __.margin.bottom },
       xscale = d3.scale.ordinal(),
@@ -64,7 +52,7 @@ d3.parcoords = function(config) {
 
   // expose the state of the chart
   pc.__ = __;
-  d3.getset.call(pc, __);
+  getset(pc, __, events);
   d3.rebind(pc, events, "on");
 
   pc.autoscale = function() {
@@ -114,8 +102,7 @@ d3.parcoords = function(config) {
     } else {
       __.data.forEach(path_foreground);
     }
-    events.render();
-
+    events.render.call(this);
     return this;
   };
 
@@ -213,7 +200,7 @@ d3.parcoords = function(config) {
     brushed = selected();  
     pc.render();
     extent_area();
-    events.brush(pc.brushed());
+    events.brush.call(pc,brushed);
   };
 
   // expose a few objects
@@ -240,7 +227,7 @@ d3.parcoords = function(config) {
     };
 
     pc.render();
-    events.resize();
+    events.resize.call(this, {width: __.width, height: __.height, margin: __.margin});
 
     return this;
   };
@@ -251,7 +238,7 @@ d3.parcoords = function(config) {
     ctx.highlight.fillStyle = "rgba(255,255,255,0.8)";
     ctx.highlight.fillRect(-1,-1,w()+2,h()+2);
     data.forEach(path_highlight);
-    events.highlight();
+    events.highlight.call(this,data);
     return this;
   };
 
@@ -286,14 +273,16 @@ d3.parcoords = function(config) {
   pc.composite = function(_) {
     if (!arguments.length) return __.composite;
     __.composite = _;
-    ctx.foreground.globalCompositeOperation = __.composite;
+    ctx.foreground.globalCompositeOperation = _;
+    events.composite.call(this, _);
     return this;
   };
 
   pc.alpha = function(_) {
     if (!arguments.length) return __.alpha;
     __.alpha = _;
-    ctx.foreground.globalAlpha = __.alpha;
+    ctx.foreground.globalAlpha = _;
+    events.alpha.call(this,_);
     return this;
   };
 
@@ -373,6 +362,19 @@ d3.parcoords = function(config) {
     return path(d, ctx.highlight);
   };
 
+  // getter/setter with event firing
+  function getset(obj,state,events)  {
+    d3.keys(state).forEach(function(key) {   
+      obj[key] = function(x) {
+        if (!arguments.length) return state[key];
+        var old = state[key];
+        state[key] = x;
+        events[key].call(pc,{"value": x, "previous": old});
+        return obj;
+      };
+    });
+  };
+
   function extend(target, source) {
     for (key in source) {
       target[key] = source[key];