tinker10 / d3-labeler Goto Github PK
View Code? Open in Web Editor NEWD3 plug-in for automatic label placement using simulated annealing.
License: MIT License
D3 plug-in for automatic label placement using simulated annealing.
License: MIT License
Hey,
first of all, thanks for the great work!
It would be really nice to have the labeler packaged in npm if it is possible.
Best Regards
Jan
Width can be approximated by text.length() and a fixed default height can be given. This will make it easier to use.
I've not seen any activity on issues / PRs? The reason I am asking is because I have created a similar project here:
https://d3fc.io/api/label-layout-api.html
All due respect to the creator of D3-Labeler, which helped me in my own implementation.
When I run labeler on a (real life) example, I seem to get two possible configurations for a certain arrangement of labels. One is clearly better in my eyes, and also more probable (so I guess, "more optimal"). I wish there was a way to get this "better" solution โ maybe run several times, infer new starting positions, then do a final run?
The example is as follows:
France Suisse Autriche
I get several results:
Suisse
France Autriche
France Autriche
Suisse
France
Suisse Autriche
The third is better and more probable, but 1 and 2 are local optima and I sometimes get them.
I wonder if we could use the changes from a first run to infer where the constraints are high, then try all combinations (maybe with a genetic algorithm if there are too many dimensions) of "top/down/left/right" on these specific points.
I would like to be able to use D3-Labeler in projects, and to make improvements and contributions, but I am hesitant to do so when no license is specified. I suggest using either MIT or Apache license.
By default, we can say anchor.x = label.x
, anchor.y = label.y
, and anchor.r = 0
.
Do you think it would make sense to create a map to simplify identification of overlapping labels? The idea I had was to calculate the overlapping area using the number of squares in a grid system which could be as finely grained as pixels, based on the width and height, or could be broken up into larger sections for optimization.
To further clarify, the map would be based on the number of labels that overlap at any particular x,y value in the grid. The initial map would only need to be created once and then could be updated as labels are moved. The benefit would be avoiding an iteration over every label for every label we're evaluating - rather you could consider only the (x,y) values to identify the overlapping area.
I can put together a PR request, but just wanted to discuss the idea first - maybe I'm missing something? Let me know if I can further clarify.
Thanks for this library! It is very useful ๐
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.