{"id":15761586,"url":"https://github.com/finnfiddle/d3-v4-grid","last_synced_at":"2025-03-13T19:32:08.069Z","repository":{"id":57211330,"uuid":"92215057","full_name":"finnfiddle/d3-v4-grid","owner":"finnfiddle","description":"Grid layout for D3 v4","archived":false,"fork":false,"pushed_at":"2017-07-21T19:46:25.000Z","size":9,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-11T11:17:44.230Z","etag":null,"topics":["d3","d3js","d3v4","javascript","visualisation","visualization"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/finnfiddle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-23T20:10:38.000Z","updated_at":"2018-12-13T03:44:46.000Z","dependencies_parsed_at":"2022-08-30T13:11:46.570Z","dependency_job_id":null,"html_url":"https://github.com/finnfiddle/d3-v4-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Fd3-v4-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Fd3-v4-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Fd3-v4-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Fd3-v4-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finnfiddle","download_url":"https://codeload.github.com/finnfiddle/d3-v4-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469252,"owners_count":20295715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","d3js","d3v4","javascript","visualisation","visualization"],"created_at":"2024-10-04T11:03:07.623Z","updated_at":"2025-03-13T19:32:07.757Z","avatar_url":"https://github.com/finnfiddle.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# D3 v4 Grid Layout\n\nA grid layout for [D3](http://d3js.org) forked from [https://github.com/interactivethings/d3-grid](https://github.com/interactivethings/d3-grid) and updated to use D3 v4. The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.\n\n## Installation\n\n```\nnpm i d3-v4-grid\n```\n\n## Example\n\n```javascript\nimport Grid from 'd3-v4-grid';\n\nconst grid = Grid() // create new grid layout\n  .data([ // input an array of data\n    { foo: 'bar' },\n    { foo: 'bar' },\n    { foo: 'bar' },\n    { foo: 'bar' },\n  ])\n  .bands(true) // use bands not points\n  .size([400, 200]); // set size of container\n\n// recompute the node positions\ngrid.layout();\n\nconsole.log(grid.nodes());\n// [\n//   { foo: 'bar', x: 0, y: 0 },\n//   { foo: 'bar', x: 200, y: 0 },\n//   { foo: 'bar', x: 0, y: 100 },\n//   { foo: 'bar', x: 200, y: 100 },\n// ]\n\nconsole.log(grid.nodeSize());\n// [200, 100]\n\nconsole.log(grid.cols());\n// 2\n\nconsole.log(grid.rows());\n// 2\n```\n\n## API\n\n### Grid()\n\nConstructs a new grid layout.\n\n### grid.size([size])\n\nIf size is specified, sets the overall size of the layout as [width, height].\n\nIf size is set, returns the current size. Default size is 1×1.\n\nIf instead nodeSize is set, returns the actual size of the layout after grid has been called.\n\n### grid.nodeSize([nodeSize])\n\nIf nodeSize is specified, sets the size of an individual node as [width, height].\n\nIf nodeSize is set, returns the current nodeSize.\n\nIf instead size is set, returns the actual size of a node after grid has been called.\n\n### grid.rows([num])\n\nFixes the layout to num rows or returns the number of rows (if it was set before).\n\n### grid.cols([num])\n\nFixes the layout to num columns or returns the number of columns (if it was set before).\n\n### grid.bands([useBands])\n\nConfigure the grid to treat nodes either as bands or points (default).\n\nIf `useBands` is set to `true` then the layout will use `d3.scaleBand()` to calculate positions. If it is set to false (default) then it will use `d3.scalePoint()`.\n\n### grid.padding([x, y])\n\nSpecify 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().\n\nIf 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:\n\n```javascript\nvar grid = Grid()\n  .nodeSize([100, 100])\n  .padding([20, 20]);\n```\n### grid.data([data])\n\nIf data is set it sets the input data array for the layout. If not set then it returns the current data array.\n\n### grid.layout()\n\nTriggers the layout to recalculate the node positions.\n\n### grid.nodes()\n\nReturns the original input data array with positions `x` and `y` values added to each item.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinnfiddle%2Fd3-v4-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinnfiddle%2Fd3-v4-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinnfiddle%2Fd3-v4-grid/lists"}