Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

events for getter/setters

  • Loading branch information...
commit 18c3fa41805589dadf9a42cde0c92a3818b39fa8 1 parent 6a2eef0
@syntagmatic authored
Showing with 41 additions and 27 deletions.
  1. +16 −4 README.md
  2. BIN  forkme.png
  3. +1 −1  index.html
  4. +24 −22 parcoords.js
View
20 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
View
BIN  forkme.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2  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>
View
46 parcoords.js
@@ -1,16 +1,4 @@
-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: [],
@@ -18,7 +6,7 @@ d3.parcoords = function(config) {
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];
Please sign in to comment.
Something went wrong with that request. Please try again.