13 thoughts on “D3 Pan and Zoom Reuse Demo

  1. Nivaldo Fernandes

    Hi Bill,

    Already thanked you via the D3 google group but wanted to thank you here as well.

    I forked the example from CodePen and am now taking a crack at applying semantic zoom to it. This will be a killer combination to handily deal with large datasets.

    Nivaldo

    Reply
  2. Herman

    Hi Bill,

    great demo! I was wondering, in your example, the positioning of some of the node/arcs seems off. Somehow the rotation/translation seems to go beyond 360 degrees, causing some overlap between various nodes/arcs. Do you have any idea what is causing this?

    best, Herman

    Reply
    1. Bill Post author

      It seems to have something to do with the diameter used by the tree layout. If I change it from 400 to 350, the problem seems to go away but I thought 400 looked a little more readable.

      Reply
      1. FernOfTheAndes

        I attempted to implement semantic zoom to deal with large datasets but experienced conflicts between the different zooms being applied. As you can see, geometric zoom does not help with large datasets, unless you specify a very large viewport which is not very practical.

        Reply
        1. Bill Post author

          Yep there are certainly some kinks to be worked out.

          Reply
  3. adam

    This looks awsome… Why is the zoomed area draggable beyond the minimap?

    Reply
    1. Bill Post author

      Lol, probably because it’s a demo rather than production code. You are correct that ideally it would not be dragable outside the usable area 🙂

      Reply
  4. Vikash

    Everything looks awesome but i am not able to reuse minimap for the org chart neither built within d3.js (http://jsfiddle.net/YMa2y/346/ ) nor for the jQuery-orgchart. jsfiddle is created for the d3.js orgchart but may be due to code complexity i have not been able to introduce minimap in to it. Please let me know how should i proceed.

    Thanks

    Reply
  5. Pingback: Bill White's Blog | D3.js Mapping Meets Pan and Zoom Demo

Leave a Reply

Your email address will not be published. Required fields are marked *