{"id":20061656,"url":"https://github.com/tylerrick/d3-force-labels","last_synced_at":"2026-06-08T16:34:05.047Z","repository":{"id":66442467,"uuid":"118186881","full_name":"TylerRick/d3-force-labels","owner":"TylerRick","description":null,"archived":false,"fork":false,"pushed_at":"2018-01-23T02:49:54.000Z","size":4,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-02-15T06:14:22.229Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/TylerRick.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-19T22:42:12.000Z","updated_at":"2020-05-22T13:55:08.000Z","dependencies_parsed_at":"2023-06-29T13:14:02.979Z","dependency_job_id":null,"html_url":"https://github.com/TylerRick/d3-force-labels","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TylerRick/d3-force-labels","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerRick%2Fd3-force-labels","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerRick%2Fd3-force-labels/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerRick%2Fd3-force-labels/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerRick%2Fd3-force-labels/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TylerRick","download_url":"https://codeload.github.com/TylerRick/d3-force-labels/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerRick%2Fd3-force-labels/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34071656,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-13T13:21:18.436Z","updated_at":"2026-06-08T16:34:05.028Z","avatar_url":"https://github.com/TylerRick.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D3 Force Labels\n\nDemo: \u003chttps://bl.ocks.org/TylerRick/c5df6e777a9de71777b4c4b449abfae8\u003e\n\nGenerates an automatic and dynamic positioning for labels, using [`d3.forceSimulation()`](https://github.com/d3/d3-force/blob/master/README.md#forceSimulation).\n\n## Usage\n\nPass in a selection of the objects you want to attach labels to.\n\n```js\nlabelSim = d3.forceLabels(anchors)\n```\n\n`forceLabels()` returns a [`d3.forceSimulation()`](https://github.com/d3/d3-force/blob/master/README.md#forceSimulation) object which allows full control over the charge strength, etc.\n\nFor example, to change the charge strength, you could do something like this:\n```js\nlabelSim.force('charge').strength(-60);\n```\n\nAt each tick the following occurs:\n\n  - Center of each object (anchor position) is determined by the SVG Bounding Box of that object and stored in object ```anchorPos``` under x,y\n  - The position of the label element is determined by a force layout where anchors are fixed nodes and labels are floating.  New position for each label is stored in object ```labelPos``` under x,y\n\nBoth the ```anchorPos``` and ```labelPos``` are inserted in the ```__data__``` variable of the object being labeled.  This allows easy access when drawing the labels and connectors.\n\nIn the demo the label and link are created as svg objects on the same data selection as the anchors.  As the position information is embedded in ```__data__```, the redraw function is simply:\n\n```js\nfunction redrawLabels() {\n  labelBox\n    .attr(\"transform\", function(d) {\n      return \"translate(\" + d.labelPos.x + \" \" + d.labelPos.y + \")\"\n    })\n\n  links\n    .attr(\"x1\", function(d) { return d.anchorPos.x })\n    .attr(\"y1\", function(d) { return d.anchorPos.y })\n    .attr(\"x2\", function(d) { return d.labelPos.x })\n    .attr(\"y2\", function(d) { return d.labelPos.y })\n}\n```\n\nwhich is attached like this:\n\n```js\nlabelSim = d3.forceLabels(anchors)\n  .on(\"tick\", redrawLabels)\n```\n\n## Authors\n\n- \u003chttps://github.com/ZJONSSON\u003e\n- \u003chttps://github.com/TylerRick\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylerrick%2Fd3-force-labels","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftylerrick%2Fd3-force-labels","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylerrick%2Fd3-force-labels/lists"}