Randomly position jsPlumb's windows/dialogs

Is there a way to randomly position all of the dialogs/windows created with jsPlumb?

If I have lots of items which I want to represent in these dialogs, but the issue is I need to place them on the screen by giving them a position, but since there’s lots of items it would be a tedious job, not to mention this list of items might grow/shrink.

  • How do I use D3js in WordPress?
  • Show the kind of relation between nodes in cytoscape.js
  • How to check d3 js force graph for nodes with no links and remove them?
  • HighCharts : Is it possible to customize the colors of individual series?
  • JS Graph library supporting labeled edges
  • cytoscape.js zoom to fit currently selected nodes
  • Looking at the jsPlumb demo, dialogs are given a certain position using “top” and “left” CSS properties:

    #window3 { top:2em; left:2em; }
    #window4 { top:2em; left:32em; }

    Is there a way to place these dialogs on the screen randomly but with a certain distance between them? It would be even better if there was a way to place the dialogs on the screen so there would be minimal crossing between the arrows and the dialogs.


    Not exactly the best solution, but a pretty nice one:


    https://github.com/lndb/jsPlumb_Liviz.js (two demoes are provided here)


  • Add an edge label with Cytoscape.js
  • 3D radar chart in JavaScript
  • How to show gridlines only on 0 on the yAxis in highcharts?
  • d3.js - transform & transition, multiple lines
  • Why is the tooltip for my sigma js graph out of position?
  • How do I pass a Ruby array to Javascript to make a line graph
  • 2 Solutions collect form web for “Randomly position jsPlumb's windows/dialogs”

    If I’m understanding the question correctly, you’re concerned about the initial positioning of the components, and you’re searching for a generic solution (independent of size of components and amount of components).

    Separation of concerns:
    The task of initial component positioning can be regarded independently from jsPlump:

    For my example I’m choosing an algorithm with the following requirements:

    • position the components evenly on the screen, taking the viewport width as the horizontal containment

    • margin of components should be adjustable through CSS

    • components must remain draggable to keep jsPlumb functionality

    In my solution I’m making use of the fact that with relative positioning, it is easy to distribute the components in a grid. Giving the containing DIV an initial class “initial”, I’m defining the following CSS for the components:

    #demo.initial .component.window {

    Right after the DOM components have been rendered as a grid, I’m changing their CSS position from relative to absolute (by removing the container’s “initial” class and applying the component’s offset within their style attribute).

    $(document).ready(function() {
        $(".component.window").each(function(i) {
            var left = $(this).offset().left;
            var top = $(this).offset().top;
                left: left,
                top: top

    Here’s a link to my jsbin

    Edit: Here’s a link to jsfiddle

    Initial positions of the components will differ depending on the width of your target frame.

    First solution was using this library: https://github.com/lndb/jsPlumb_Liviz.js

    A combination of the jsPlumb library that connects elements with the
    Liviz.js for the positioning of these elements.

    In other words: using jsPlumb for the UI (connecting divs), and
    Liviz.js for the positioning of these elements (divs).

    Another solution that I found would be using the “dagre – Directed graph rendering” javascript library: https://github.com/cpettitt/dagre

    Dagre is a JavaScript library that makes it easy to lay out directed
    graphs on the client-side.

    Key priorities for this library are:

    Completely client-side computed layout. There are great, feature-rich
    alternatives, like graphviz, if client-side layout is not a
    requirement for you.

    Speed. Dagre must be able to draw medium sized graphs quickly,
    potentially at the cost of not being able to adopt more optimal or
    exact algorithms.

    Rendering agnostic. Dagre requires only very basic information to lay
    out graphs, such as the dimensions of nodes. You’re free to render the
    graph using whatever technology you prefer. We use D3 in some of our
    examples and highly recommend it if you plan to render using CSS and