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 +}