diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..e0cc348
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+ - '8'
+ - '6'
diff --git a/README.md b/README.md
index 1f76573..98976d7 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,12 @@
-# d3.layout.grid
+# d3-grid
-A grid layout for [D3](http://d3js.org). The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.
+A grid layout for [D3](http://d3js.org)v4.
+
+The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.
## API
-# d3.layout.grid()
+# d3.grid()
Constructs a new grid layout.
@@ -17,20 +19,21 @@ Computes the layout for nodes. Per default, the layout tries to keep the
# grid.points()
-Configure the grid to treat nodes as points, cf. [d3.scale.ordinal().rangePoints()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangePoints).
+Configure the grid to treat nodes as points, cf. [d3.scalePoints().range()](https://github.com/d3/d3-scale#point-scales).
+
# grid.bands()
-Configure the grid to treat nodes as bands, cf. [d3.scale.ordinal().rangeBands()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)
+Configure the grid to treat nodes as bands, cf. [d3.scaleBand().range()](https://github.com/d3/d3-scale#band-scales).
# grid.padding([padding])
-Specify the padding between the node bands as [x, y]. x and y are relative to the band width/height, similar to the padding parameter of [d3.scale.ordinal().rangeBands()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands).
+Specify the padding between the node bands as [x, y]. x and y are relative to the band width/height, similar to the padding parameter of [d3.scaleBand().range()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands).
If [nodeSize](#nodeSize) is set, padding is absolute. For example, to configure a grid layout for nodes with 100×100px size, and 20px horizontal and vertical padding, use:
```javascript
-var grid = d3.layout.grid()
+var grid = d3.grid()
.nodeSize([100, 100])
.padding([20, 20]);
```
@@ -59,15 +62,18 @@ If nodeSize is set, returns the current nodeSize.
If instead [size](#size) is set, returns the actual size of a node after [grid](#grid) has been called.
-
## Examples
-* [Grid layout demo](http://bl.ocks.org/herrstucki/5684816)
+* [Grid layout demo](http://bl.ocks.org/basilesimon/dbb876d063f2b0475824dbd6b16c251f)
## Author
Jeremy Stucki, [Interactive Things](http://interactivethings.com)
+## Contributors
+
+Basile Simon, [@basilesimon](https://twitter.com/basilesimon)
+
## License
BSD, see LICENSE.txt
diff --git a/d3-grid.js b/d3-grid.js
deleted file mode 100644
index 88f7d04..0000000
--- a/d3-grid.js
+++ /dev/null
@@ -1,123 +0,0 @@
-(function() {
- var DEBUG = false;
-
- d3.layout.grid = function() {
- var mode = "equal",
- layout = _distributeEqually,
- x = d3.scale.ordinal(),
- y = d3.scale.ordinal(),
- size = [1, 1],
- actualSize = [0, 0],
- nodeSize = false,
- bands = false,
- padding = [0, 0],
- cols, rows;
-
- function grid(nodes) {
- return layout(nodes);
- }
-
- function _distributeEqually(nodes) {
- var i = -1,
- n = nodes.length,
- _cols = cols ? cols : 0,
- _rows = rows ? rows : 0,
- col, row;
-
- // FIXME: make explicit rows/cols exclusive? Or find a smart way to deal with overflows (repeat?)
- // FIXME: when rows are set, fill top-to-bottom (make test with 5 data points and 4 rows)
-
- if (_rows && !_cols) {
- _cols = Math.ceil(n / _rows)
- } else {
- _cols || (_cols = Math.ceil(Math.sqrt(n)));
- _rows || (_rows = Math.ceil(n / _cols));
- }
-
- if (nodeSize) {
- x.domain(d3.range(_cols)).range(d3.range(0, (size[0] + padding[0]) * _cols, size[0] + padding[0]));
- y.domain(d3.range(_rows)).range(d3.range(0, (size[1] + padding[1]) * _rows, size[1] + padding[1]));
- actualSize[0] = bands ? x(_cols - 1) + size[0] : x(_cols - 1);
- actualSize[1] = bands ? y(_rows - 1) + size[1] : y(_rows - 1);
- } else if (bands) {
- x.domain(d3.range(_cols)).rangeBands([0, size[0]], padding[0], 0);
- y.domain(d3.range(_rows)).rangeBands([0, size[1]], padding[1], 0);
- actualSize[0] = x.rangeBand();
- actualSize[1] = y.rangeBand();
- } else {
- x.domain(d3.range(_cols)).rangePoints([0, size[0]]);
- y.domain(d3.range(_rows)).rangePoints([0, size[1]]);
- actualSize[0] = x(1);
- actualSize[1] = y(1);
- }
-
- if (DEBUG) console.log('cols/rows', _cols, _rows);
-
- while (++i < n) {
- col = i % _cols;
- row = Math.floor(i / _cols);
-
- if (DEBUG) console.log(i, col, row);
-
- nodes[i].x = x(col);
- nodes[i].y = y(row);
- }
-
- return nodes;
- }
-
- // grid.mode = function(value) {
- // if (!arguments.length) return mode;
- // switch(mode = value) {
- // case "equal":
- // layout = _distributeEqually;
- // break;
- // }
- // return grid;
- // }
-
- grid.size = function(value) {
- if (!arguments.length) return nodeSize ? actualSize : size;
- actualSize = [0, 0];
- nodeSize = (size = value) == null;
- return grid;
- }
-
- grid.nodeSize = function(value) {
- if (!arguments.length) return nodeSize ? size : actualSize;
- actualSize = [0, 0];
- nodeSize = (size = value) != null;
- return grid;
- }
-
- grid.rows = function(value) {
- if (!arguments.length) return rows;
- rows = value;
- return grid;
- }
-
- grid.cols = function(value) {
- if (!arguments.length) return cols;
- cols = value;
- return grid;
- }
-
- grid.bands = function() {
- bands = true;
- return grid;
- }
-
- grid.points = function() {
- bands = false;
- return grid;
- }
-
- grid.padding = function(value) {
- if (!arguments.length) return padding;
- padding = value;
- return grid;
- }
-
- return grid;
- };
-})();
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..bc6f0f8
--- /dev/null
+++ b/index.js
@@ -0,0 +1 @@
+export { default as grid } from './src/d3-grid';
diff --git a/package.json b/package.json
index a5eb5c2..7398efd 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,13 @@
{
"name": "d3-grid",
- "version": "0.1.1",
- "description": "Grid layout for D3",
+ "version": "0.2.0",
+ "description": "Grid layout for D3v4",
"main": "d3-grid.js",
+ "module": "index",
+ "jsnext:main": "index",
"scripts": {
- "test": "node_modules/.bin/vows --spec"
+ "pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -f umd -n d3 -o build/d3-grid.js -- index.js",
+ "test": "vows test/*"
},
"repository": "https://github.com/interactivethings/d3-grid.git",
"keywords": [
@@ -16,11 +19,20 @@
"name": "Jeremy Stucki",
"url": "http://interactivethings.com"
},
- "license": "BSD",
+ "constributors": [
+ {
+ "name": "Basile Simon",
+ "url": "https://twitter.com/basilesimon"
+ }
+ ],
+ "license": "BSD-3-Clause",
"dependencies": {
- "d3": "~3.1.5"
+ "d3-scale": "^1.0.6"
},
"devDependencies": {
+ "d3": "^4",
+ "package-preamble": "0.0",
+ "rollup": "0.41",
"vows": "~0.7.0"
}
}
diff --git a/src/d3-grid.js b/src/d3-grid.js
new file mode 100644
index 0000000..250b212
--- /dev/null
+++ b/src/d3-grid.js
@@ -0,0 +1,117 @@
+export default function() {
+ var mode = 'equal',
+ layout = _distributeEqually,
+ x = d3.scaleOrdinal(),
+ y = d3.scaleOrdinal(),
+ size = [1, 1],
+ actualSize = [0, 0],
+ nodeSize = false,
+ bands = false,
+ padding = [0, 0],
+ cols,
+ rows;
+
+ function grid(nodes) {
+ return layout(nodes);
+ }
+
+ function _distributeEqually(nodes) {
+ var i = -1,
+ n = nodes.length,
+ _cols = cols ? cols : 0,
+ _rows = rows ? rows : 0,
+ col,
+ row;
+
+ if (_rows && !_cols) {
+ _cols = Math.ceil(n / _rows);
+ } else {
+ _cols || (_cols = Math.ceil(Math.sqrt(n)));
+ _rows || (_rows = Math.ceil(n / _cols));
+ }
+
+ if (nodeSize) {
+ x = d3.scaleOrdinal();
+ y = d3.scaleOrdinal();
+ x
+ .domain(d3.range(_cols))
+ .range(
+ d3.range(0, (size[0] + padding[0]) * _cols, size[0] + padding[0])
+ );
+ y
+ .domain(d3.range(_rows))
+ .range(
+ d3.range(0, (size[1] + padding[1]) * _rows, size[1] + padding[1])
+ );
+ actualSize[0] = bands ? x(_cols - 1) + size[0] : x(_cols - 1);
+ actualSize[1] = bands ? y(_rows - 1) + size[1] : y(_rows - 1);
+ } else if (bands) {
+ var x = d3.scaleBand();
+ var y = d3.scaleBand();
+ x.domain(d3.range(_cols)).range([0, size[0]], padding[0], 0);
+ y.domain(d3.range(_rows)).range([0, size[1]], padding[1], 0);
+ actualSize[0] = x.bandwidth() - 10;
+ actualSize[1] = y.bandwidth() - 10;
+ } else {
+ var x = d3.scalePoint();
+ var y = d3.scalePoint();
+ x.domain(d3.range(_cols)).range([0, size[0]]);
+ y.domain(d3.range(_rows)).range([0, size[1]]);
+ actualSize[0] = x(1);
+ actualSize[1] = y(1);
+ }
+
+ while (++i < n) {
+ col = i % _cols;
+ row = Math.floor(i / _cols);
+ nodes[i].x = x(col);
+ nodes[i].y = y(row);
+ }
+
+ return nodes;
+ }
+
+ grid.size = function(value) {
+ if (!arguments.length) return nodeSize ? actualSize : size;
+ actualSize = [0, 0];
+ nodeSize = (size = value) == null;
+ return grid;
+ };
+
+ grid.nodeSize = function(value) {
+ if (!arguments.length) return nodeSize ? size : actualSize;
+ actualSize = [0, 0];
+ nodeSize = (size = value) != null;
+ return grid;
+ };
+
+ grid.rows = function(value) {
+ if (!arguments.length) return rows;
+ rows = value;
+ return grid;
+ };
+
+ grid.cols = function(value) {
+ if (!arguments.length) return cols;
+ cols = value;
+ return grid;
+ };
+
+ grid.bands = function() {
+ bands = true;
+ return grid;
+ };
+
+ grid.points = function() {
+ bands = false;
+ return grid;
+ };
+
+ grid.padding = function(value) {
+ if (!arguments.length) return padding;
+ padding = value;
+ return grid;
+ };
+
+ return grid;
+}
diff --git a/test/d3-grid-test.js b/test/d3-grid-test.js
index cf9c4fa..b595db0 100644
--- a/test/d3-grid-test.js
+++ b/test/d3-grid-test.js
@@ -1,274 +1,292 @@
-var vows = require('vows'),
- assert = require('assert');
+const vows = require('vows');
+const assert = require('assert');
d3 = require('d3');
-var grid = require("../d3-grid.js");
-
-vows.describe('d3.layout.grid').addBatch({
- 'Grid layout' : {
- topic: function() { return d3.layout.grid; },
- 'equally distributes 4 nodes within a 1x1 space, left to right, top to bottom': function(grid) {
- var l = grid().points();
- var nodes = [{}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 1},
- {x: 1, y: 1}
- ]);
+const { grid } = require('../build/d3-grid.js');
+
+vows
+ .describe('d3.grid')
+ .addBatch({
+ 'Grid layout': {
+ topic: function() {
+ d3.grid = grid;
+ return d3.grid;
+ },
+ 'equally distributes 4 nodes within a 1x1 space, left to right, top to bottom': function(
+ grid
+ ) {
+ var l = grid().points();
+ var nodes = [{}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 1 },
+ { x: 1, y: 1 },
+ ]);
+ },
+ '1 data point is in the center (is this good or should it be at [0,0]?)': function(
+ grid
+ ) {
+ var l = grid().points();
+ var nodes = [{}];
+
+ assert.deepEqual(l(nodes).map(layout), [{ x: 0.5, y: 0.5 }]);
+ },
+ 'equally distributes 5 nodes within a 1x1 space': function(grid) {
+ var l = grid().points();
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 0.5, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 1 },
+ { x: 0.5, y: 1 },
+ ]);
+ },
+ 'equally distributes 5 nodes within a 300x500 space': function(grid) {
+ var l = grid().points().size([300, 500]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 150, y: 0 },
+ { x: 300, y: 0 },
+ { x: 0, y: 500 },
+ { x: 150, y: 500 },
+ ]);
+ },
+ 'fixed amount of cols': function(grid) {
+ var l = grid().points().cols(2);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 0.5 },
+ { x: 1, y: 0.5 },
+ { x: 0, y: 1 },
+ ]);
+ },
+ 'fixed amount of rows': function(grid) {
+ var l = grid().points().rows(3);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 0.5 },
+ { x: 1, y: 0.5 },
+ { x: 0, y: 1 },
+ ]);
+ },
+ 'fixed amount of cols and rows': function(grid) {
+ var l = grid().points().cols(2).rows(5);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 0.25 },
+ { x: 1, y: 0.25 },
+ { x: 0, y: 0.5 },
+ ]);
+ },
+ '1 row': function(grid) {
+ var l = grid().points().rows(1);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0.5 },
+ { x: 0.25, y: 0.5 },
+ { x: 0.5, y: 0.5 },
+ { x: 0.75, y: 0.5 },
+ { x: 1, y: 0.5 },
+ ]);
+ },
+ // TODO: This needs some more thought ...
+ // '4 rows, 5 data points': function(grid) {
+ // var l = grid().points().rows(4);
+ // var nodes = [{}, {}, {}, {}, {}];
+
+ // assert.deepEqual(l(nodes).map(layout), [
+ // {x: 0, y: 0},
+ // {x: 0, y: 1/3},
+ // {x: 0, y: 2/3},
+ // {x: 0, y: 1},
+ // {x: 1, y: 0}
+ // ]);
+ // },
+ 'fixed node sizes': function(grid) {
+ var l = grid().points().nodeSize([1, 1]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 2, y: 0 },
+ { x: 0, y: 1 },
+ { x: 1, y: 1 },
+ ]);
+ },
+ 'reset rows/cols after each call': function(grid) {
+ var l = grid().points();
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 0.5, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 1 },
+ { x: 0.5, y: 1 },
+ ]);
+
+ nodes = [{}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 1 },
+ { x: 1, y: 1 },
+ ]);
+ },
+ 'fixed amount of cols stays the same': function(grid) {
+ var l = grid().points().cols(2);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 0.5 },
+ { x: 1, y: 0.5 },
+ { x: 0, y: 1 },
+ ]);
+
+ nodes = [{}, {}, {}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
+ { x: 0, y: 1 / 3 },
+ { x: 1, y: 1 / 3 },
+ { x: 0, y: 2 / 3 },
+ { x: 1, y: 2 / 3 },
+ { x: 0, y: 1 },
+ ]);
+ },
+ bands: function(grid) {
+ var l = grid().bands();
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 1 / 3, y: 0 },
+ { x: 2 / 3, y: 0 },
+ { x: 0, y: 0.5 },
+ { x: 1 / 3, y: 0.5 },
+ ]);
+
+ l.cols(2);
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 0.5, y: 0 },
+ { x: 0, y: 1 / 3 },
+ { x: 0.5, y: 1 / 3 },
+ { x: 0, y: 2 / 3 },
+ ]);
+ },
+ 'bands with padding': function(grid) {
+ var l = grid().bands().padding([0.5, 0.5]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 0.4, y: 0 },
+ { x: 0.8, y: 0 },
+ { x: 0, y: 2 / 3 },
+ { x: 0.4, y: 2 / 3 },
+ ]);
+
+ l.cols(2);
+
+ assert.deepEqual(l(nodes).map(layout), [
+ { x: 0, y: 0 },
+ { x: 2 / 3, y: 0 },
+ { x: 0, y: 0.4 },
+ { x: 2 / 3, y: 0.4 },
+ { x: 0, y: 0.8 },
+ ]);
+ },
+ 'initial sizes': function(grid) {
+ var l = grid();
+ assert.deepEqual(l.size(), [1, 1]);
+ assert.deepEqual(l.nodeSize(), [0, 0]);
+ assert.deepEqual(l.nodeSize([1, 1]).size(), [0, 0]);
+ },
+ '.size() reports actual size when .points().nodeSize() is set': function(
+ grid
+ ) {
+ var l = grid().points().nodeSize([1, 1]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ l(nodes);
+ assert.deepEqual(l.size(), [2, 1]);
+ },
+ '.size() reports actual size when .points().nodeSize() is set': function(
+ grid
+ ) {
+ var l = grid().points().nodeSize([1, 1]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ l(nodes);
+ assert.deepEqual(l.size(), [2, 1]);
+ },
+ '.size() reports actual size when .bands().nodeSize() is set': function(
+ grid
+ ) {
+ var l = grid().bands().nodeSize([1, 1]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ l(nodes);
+ assert.deepEqual(l.size(), [3, 2]);
+ },
+ '.nodeSize() reports actual spacing between points when .points().size() is set': function(
+ grid
+ ) {
+ var l = grid().points().size([1, 1]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ l(nodes);
+ assert.deepEqual(l.nodeSize(), [0.5, 1]);
+ },
+ '.nodeSize() reports actual size when .bands().size() is set': function(
+ grid
+ ) {
+ var l = grid().bands().size([1, 1]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ l(nodes);
+ assert.deepEqual(l.nodeSize(), [1 / 3, 0.5]);
+ },
+ '.nodeSize() reports actual size when .bands().size().padding() is set': function(
+ grid
+ ) {
+ var l = grid().bands().padding([0.5, 0.5]).size([1, 1]);
+ var nodes = [{}, {}, {}, {}, {}];
+
+ l(nodes);
+ assert.deepEqual(l.nodeSize(), [1 / 5, 1 / 3]);
+ },
},
- '1 data point is in the center (is this good or should it be at [0,0]?)': function(grid) {
- var l = grid().points();
- var nodes = [{}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0.5, y: 0.5}
- ]);
- },
- 'equally distributes 5 nodes within a 1x1 space': function(grid) {
- var l = grid().points();
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 0.5, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 1},
- {x: 0.5, y: 1}
- ]);
- },
- 'equally distributes 5 nodes within a 300x500 space': function(grid) {
- var l = grid().points()
- .size([300, 500]);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 150, y: 0},
- {x: 300, y: 0},
- {x: 0, y: 500},
- {x: 150, y: 500}
- ]);
- },
- 'fixed amount of cols': function(grid) {
- var l = grid().points().cols(2);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 0.5},
- {x: 1, y: 0.5},
- {x: 0, y: 1}
- ]);
- },
- 'fixed amount of rows': function(grid) {
- var l = grid().points().rows(3);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 0.5},
- {x: 1, y: 0.5},
- {x: 0, y: 1}
- ]);
- },
- 'fixed amount of cols and rows': function(grid) {
- var l = grid().points().cols(2).rows(5);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 0.25},
- {x: 1, y: 0.25},
- {x: 0, y: 0.5}
- ]);
- },
- '1 row': function(grid) {
- var l = grid().points().rows(1);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0.5},
- {x: 0.25, y: 0.5},
- {x: 0.5, y: 0.5},
- {x: 0.75, y: 0.5},
- {x: 1, y: 0.5}
- ]);
- },
- // TODO: This needs some more thought ...
- // '4 rows, 5 data points': function(grid) {
- // var l = grid().points().rows(4);
- // var nodes = [{}, {}, {}, {}, {}];
-
- // assert.deepEqual(l(nodes).map(layout), [
- // {x: 0, y: 0},
- // {x: 0, y: 1/3},
- // {x: 0, y: 2/3},
- // {x: 0, y: 1},
- // {x: 1, y: 0}
- // ]);
- // },
- 'fixed node sizes': function(grid) {
- var l = grid().points().nodeSize([1, 1]);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 2, y: 0},
- {x: 0, y: 1},
- {x: 1, y: 1}
- ]);
- },
- 'reset rows/cols after each call': function(grid) {
- var l = grid().points();
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 0.5, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 1},
- {x: 0.5, y: 1}
- ]);
-
- nodes = [{}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 1},
- {x: 1, y: 1}
- ]);
- },
- 'fixed amount of cols stays the same': function(grid) {
- var l = grid().points().cols(2);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 0.5},
- {x: 1, y: 0.5},
- {x: 0, y: 1}
- ]);
-
- nodes = [{}, {}, {}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1, y: 0},
- {x: 0, y: 1/3},
- {x: 1, y: 1/3},
- {x: 0, y: 2/3},
- {x: 1, y: 2/3},
- {x: 0, y: 1},
-
- ]);
- },
- 'bands': function(grid) {
- var l = grid().bands();
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 1/3, y: 0},
- {x: 2/3, y: 0},
- {x: 0, y: 0.5},
- {x: 1/3, y: 0.5}
- ]);
-
- l.cols(2);
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 0.5, y: 0},
- {x: 0, y: 1/3},
- {x: 0.5, y: 1/3},
- {x: 0, y: 2/3}
- ]);
- },
- 'bands with padding': function(grid) {
- var l = grid().bands().padding([0.5, 0.5]);
- var nodes = [{}, {}, {}, {}, {}];
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 0.4, y: 0},
- {x: 0.8, y: 0},
- {x: 0, y: 2/3},
- {x: 0.4, y: 2/3}
- ]);
-
- l.cols(2);
-
- assert.deepEqual(l(nodes).map(layout), [
- {x: 0, y: 0},
- {x: 2/3, y: 0},
- {x: 0, y: 0.4},
- {x: 2/3, y: 0.4},
- {x: 0, y: 0.8}
- ]);
- },
- 'initial sizes': function(grid) {
- var l = grid();
- assert.deepEqual(l.size(), [1, 1]);
- assert.deepEqual(l.nodeSize(), [0, 0]);
- assert.deepEqual(l.nodeSize([1, 1]).size(), [0, 0]);
- },
- '.size() reports actual size when .points().nodeSize() is set': function(grid) {
- var l = grid().points().nodeSize([1, 1]);
- var nodes = [{}, {}, {}, {}, {}];
-
- l(nodes);
- assert.deepEqual(l.size(), [2, 1]);
- },
- '.size() reports actual size when .points().nodeSize() is set': function(grid) {
- var l = grid().points().nodeSize([1, 1]);
- var nodes = [{}, {}, {}, {}, {}];
-
- l(nodes);
- assert.deepEqual(l.size(), [2, 1]);
- },
- '.size() reports actual size when .bands().nodeSize() is set': function(grid) {
- var l = grid().bands().nodeSize([1, 1]);
- var nodes = [{}, {}, {}, {}, {}];
-
- l(nodes);
- assert.deepEqual(l.size(), [3, 2]);
- },
- '.nodeSize() reports actual spacing between points when .points().size() is set': function(grid) {
- var l = grid().points().size([1, 1]);
- var nodes = [{}, {}, {}, {}, {}];
-
- l(nodes);
- assert.deepEqual(l.nodeSize(), [0.5, 1]);
- },
- '.nodeSize() reports actual size when .bands().size() is set': function(grid) {
- var l = grid().bands().size([1, 1]);
- var nodes = [{}, {}, {}, {}, {}];
-
- l(nodes);
- assert.deepEqual(l.nodeSize(), [1/3, 0.5]);
- },
- '.nodeSize() reports actual size when .bands().size().padding() is set': function(grid) {
- var l = grid().bands().padding([0.5, 0.5]).size([1, 1]);
- var nodes = [{}, {}, {}, {}, {}];
-
- l(nodes);
- assert.deepEqual(l.nodeSize(), [1/5, 1/3]);
- },
- }
-}).export(module);
+ })
+ .export(module);
function layout(node) {
return {
x: node.x,
- y: node.y
+ y: node.y,
};
-}
\ No newline at end of file
+}