Giter Site home page Giter Site logo

Comments (5)

ErikGartner avatar ErikGartner commented on June 12, 2024 1

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.

ErikGartner avatar ErikGartner commented on June 12, 2024

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.

Vacilando avatar Vacilando commented on June 12, 2024

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.

RamAmancha avatar RamAmancha commented on June 12, 2024

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.

RamAmancha avatar RamAmancha commented on June 12, 2024

Thanks Erik. Yes I meant scale with the screen and the work around works perfectly.

from dtree.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.