Function
Static Public Summary | ||
public |
blankSVG: Creates a new, blank SVG to perform d3 methods on. |
|
public |
dimensions(sizing: Object): Object dimensions: Follows the general d3 sizing rules to make it easier to reason about the size and margins of the d3 the goal is have a cleaner way of coding the absolute width and the dimensions the graph will fall in. |
|
public |
draw: manages the heavy lifting of d3 by creating a reusable pattern to create graphics. |
|
public |
drawSchedule(what: String, parent: D3Object, settings: Object): Object drawSchedule: exactly the same as draw except to be used with load. |
|
public |
load what each transition to schq to be rendered in sequential order. |
Static Public
public blankSVG(d3local: D3, size: Object, select: String): D3Object source
import blankSVG from 'grizzy/src/main/blankSVG.js'
blankSVG: Creates a new, blank SVG to perform d3 methods on.
Return:
D3Object | an Array that contains the update/enter methods |
Example:
import d3 from 'd3';
var SIZE = dimensions({
width : 600,
height : 500,
margin:{top: 10, right: 30, bottom: 10, left: 20}
});
svg = new blankSVG(d3, SIZE, '#chart')
See:
public dimensions(sizing: Object): Object source
import dimensions from 'grizzy/src/main/dimensions.js'
dimensions: Follows the general d3 sizing rules to make it easier to reason about the size and margins of the d3 the goal is have a cleaner way of coding the absolute width and the dimensions the graph will fall in.
Params:
Name | Type | Attribute | Description |
sizing | Object | object of width, heigh, and margins |
|
sizing.width | Object | total height |
|
sizing.height | Object | total width |
|
sizing.margin | Object |
|
all margins |
sizing.margin.top | Object | top margin |
|
sizing.margin.right | Object | right margin |
|
sizing.margin.bottom | Object | bottom margin |
|
sizing.margin.left | Object | left margin |
Example:
var SIZE = dimensions({
width : 600,
height : 500,
margin:{top: 10, right: 30, bottom: 10, left: 20}
});
public draw(what: String, parent: D3Object, settings: Object): Object source
import draw from 'grizzy/src/main/draw.js'
draw:
manages the heavy lifting of d3 by creating a reusable pattern to
create graphics. Note: if setting.data is false
parent object will
bind only.
Params:
Name | Type | Attribute | Description |
what | String | what will be picked in the selection |
|
parent | D3Object | the svg that will be render new images |
|
settings | Object | Object of data and is. |
|
settings.data | Array | an Array or an Array of an Array and an id fuction. |
|
settings.is | Object | a function following d3 convention of passing the parent to perform d3 methods on. |
Example:
draw("rect.range", container, {
data: rangez,
is : {
enter : (selection) => {
return selection.enter().append("rect")
.attr({
"class": (d, i) => "range s" + i,
"width": w0,
"height": height,
"x": reverse ? lastScale : 0
})
.transition()
.duration(duration)
.attr({
"width": w1,
"x": reverse ? currentScale : 0
});
},
postUpdate : (selection) => {
return selection.transition()
.duration(duration)
.attr({
"x": reverse ? currentScale : 0,
"width": w1,
"height": height
});
},
exit : (selection) => {
return selection.exit().remove();
}
}
});
public drawSchedule(what: String, parent: D3Object, settings: Object): Object source
import {drawSchedule} from 'grizzy/src/main/scheduler/drawSchedule.js'
drawSchedule: exactly the same as draw except to be used with load. drawSchedule causes nothing to happen on its own. It returns an object to be rendered by load.
const axis = drawSchedule(...args);
const bar = drawSchedule(...args);
load('barAnimation', axis, bar);
The big difference is there needs to be a second argument to pass to the function during rendering. Under the hood an event listener is used to know when the function completes asynchronously. Notice in the main example the following code.
(selection, done) =>
...
.call(done)
In order for the sequence to complete an argument must be given to the function and it must be called at the end.
Return:
Object | this is description. |
Example:
function bar(parent, data, helpers) {
let {size, x, y} = helpers;
return drawSchedule('.bar', parent, {
data: data,
is:{
enter: (selection, done) => {
return selection.enter().append('rect')
.attr({
'class': 'bar',
'x': (d) => x(d.letter),
'width': x.rangeBand(),
'y': (d) => y(d.frequency),
'height': (d) => size.height - y(d.frequency)
})
.style({
'opacity': 0
})
.transition().delay(100)
.style({
'opacity': 1
})
.call(done);
}
}
});
}
TODO:
- have a verification to make sure an argument is given to the function that is called by .call.
public load(stringId: String, transitions: ...Function) source
import {load} from 'grizzy/src/main/scheduler/drawSchedule.js'
load what each transition to schq to be rendered in sequential order. Any time this function is call all previous transition are canceled.