{"id":22624085,"url":"https://github.com/shauns/react-d3-axis","last_synced_at":"2025-04-11T17:42:15.010Z","repository":{"id":50964807,"uuid":"79913429","full_name":"shauns/react-d3-axis","owner":"shauns","description":"React-based Axis component for D3","archived":false,"fork":false,"pushed_at":"2021-05-26T16:18:37.000Z","size":79,"stargazers_count":26,"open_issues_count":4,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T13:45:37.502Z","etag":null,"topics":["chart","d3","d3-axis","d3-scale","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shauns.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-24T13:21:42.000Z","updated_at":"2021-04-06T20:03:07.000Z","dependencies_parsed_at":"2022-09-10T00:50:25.468Z","dependency_job_id":null,"html_url":"https://github.com/shauns/react-d3-axis","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/shauns%2Freact-d3-axis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shauns%2Freact-d3-axis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shauns%2Freact-d3-axis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shauns%2Freact-d3-axis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shauns","download_url":"https://codeload.github.com/shauns/react-d3-axis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055274,"owners_count":21040152,"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":["chart","d3","d3-axis","d3-scale","react"],"created_at":"2024-12-09T00:10:07.119Z","updated_at":"2025-04-11T17:42:14.986Z","avatar_url":"https://github.com/shauns.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-d3-axis\n\n[![Build Status](https://travis-ci.org/shauns/react-d3-axis.svg?branch=master)](https://travis-ci.org/shauns/react-d3-axis)\n\nReact-based Axis component for D3\n\n\u003cimg src=\"http://i.imgur.com/lfNZ6RN.png\" width=\"300\"\u003e\n\n## What is this?\n\nD3v4's modular structure means you can pull in things like the scaling or colour logic, and leave out DOM functionality if you're using D3 in an environment that 'owns' the DOM -- such as React.\n\nThis is a port of the [d3-axis](https://github.com/d3/d3-axis) module into a React component and helper functions.\n\n## Examples\n\n```js\nimport {Axis, axisPropsFromTickScale, LEFT} from 'react-d3-axis';\nimport {scaleLinear} from 'd3-scale';\n\nconst scale = scaleLinear().domain([0, 100]).range([0, 500]);\n\u003cAxis {...axisPropsFromTickScale(scale, 10)} style={{orient: LEFT}}/\u003e\n```\n## API\n\n### \u0026lt;Axis /\u003e\n\nRenders an Axis in SVG (so it expects to be within an `svg` element).\n\n##### values: Array\u0026lt;T\u003e\n\nThe values corresponding to where the ticks on the axis will be made.\n\n##### position: (d: T) =\u003e number\n\nA function converting a tick value to an offset along the axis.\n\n##### format: (d: T) =\u003e string\n\nA function rendering a tick value to a string, for its label.\n\n##### range: Array\u0026lt;number\u003e\n\nThe numerical range of the *rendered* axis. So, if an axis runs 1000px wide, this would be `[0, 1000]`.\n\n##### style: AxisStyle\n\nThis is optional -- by default the axis is rendered with 'bottom' alignment (left-to-right, ticks below the line).\n\n### axisPropsFromTickScale(scale, tickCount)\n\nCreates props for an `\u003cAxis /\u003e` component from a tick-based D3 scale, such as `scaleLinear`.\n\n### axisPropsFromBandedScale(scale)\n\nCreates props for an `\u003cAxis /\u003e` component from a banded D3 scale, such as `scaleBand`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshauns%2Freact-d3-axis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshauns%2Freact-d3-axis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshauns%2Freact-d3-axis/lists"}