Comments (5)
Hi @RamAmancha
Not sure what you mean, if you want the SVG to scale with the screen, that is not implemented but there is a work around. It involves setting the SVG to max size (in pixels) then rescaling it using callbacks. See my implementation in another project below:
ErikGartner/treehouse@96e5288#r32622012
Example of the code in action:
https://treehouse.gartner.io/g/f/58e58be650453b6d49d7
/Erik
from dtree.
Yes I think that is possible.
After computing the layout of all the nodes it is pretty easy to compute the bounding box of all the nodes.
The dimension of that bounding box is what your asking for.
The best way to fix it is to add support in dTree for this. However I'm quite busy at the moment. Feel free to make a pull request if you have solution.
Otherwise it should be possible to make a quick fix by overwriting the nodeRenderer
callback. You could do something like this:
max_x = 0;
min_x = 100000;
max_y = 0;
min_y = 100000;
// pass this function in the option object to the constructor
function(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
max_x = max(x, max_x);
min_x = min(x, min_x)
max_y = max(y, max_y);
min_y = min(y, min_y)
return TreeBuilder._nodeRenderer(name, x, y, height, width, extra,
id,nodeClass, textClass, textRenderer);
After creating the graph once you would have the required size and could make a new using that size. Again that's only a hack but should work if that works for your application.
from dtree.
Thanks, I'll give it a try with what you suggest. But I think this feature would be great for everybody that uses this excellent visualization technique of yours. Hope you can add support for it soon.
from dtree.
Anyone found a fix for this? We would like to render SVG according to the screen (especially on mobile phone). kept height: 1200, width: 800 and when image cuts or doesn't fit in the view
from dtree.
Thanks Erik. Yes I meant scale with the screen and the work around works perfectly.
from dtree.
Related Issues (20)
- Integration with React JS?
- How to add children without a marrige? HOT 1
- How to set horizontal and vertical scroll bars instead of click and drag ? HOT 1
- Update Request HOT 1
- Make the graph responsive
- Appreciation HOT 2
- [REQUEST] dotted line for divorced marriage HOT 3
- Uncaught DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve relative length.
- How can I decrease height of mariagge 2nd line HOT 3
- Cannot read properties of undefined (reading 'transform') - dTree with React HOT 2
- How to use in angular
- left-right tree?
- Missing types file
- Support hover events HOT 1
- Can we add image ? HOT 2
- Can we Add Image of person in the Node? HOT 2
- Has Anybody use sql to store and retrieve Tree data from database ?
- Reference error _ is not defined. HOT 2
- Complete basic example somewhere? HOT 5
- Add Parent, chilld or reload tree when data change HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dtree.