Code Monkey home page Code Monkey logo

Comments (7)

cpettitt avatar cpettitt commented on August 29, 2024

No, but it should be pretty trivial to do. It would require a transform of the graphlib object to JSON of the form:

var nodes = g.nodes().map(function(u) { return { id: u }; })
var edges = g.edges().map(function(e) { return { source: g.source(e), target: g.target(e) }; });

I haven't tested the code above, but it should be a sketch to get you going with the input args to the d3 force layout.

I'm doing something similar on a different project where I'm using d3's tree layout with graphs from graphlib.

from dagre-d3.

dominictarr avatar dominictarr commented on August 29, 2024

hmm, okay, I have

var force = 
  d3.layout.force()
    .nodes(g.nodes().map(function (e) { return {id: e} }))
    .links(g.edges().map(function (e) {
      return {source: g.source(e), target: g.target(e)}
    }))
    .start()


var svg = d3.select('#dagre g')
    .attr("width", 1000)
    .attr("height", 1000);

but it doesn't add and svg elements or make any errors...

from dagre-d3.

cpettitt avatar cpettitt commented on August 29, 2024

Ahh sorry, that won't add any SVG. The SVG parts of dagre-d3 are pretty specific to its type of layout (Sugiyama). We could possible add support for a force layout, but anything short of giving access to d3 would probably be pretty limiting.

For reference, here are a couple examples of using the force layout with D3: http://bl.ocks.org/mbostock/4062045 and http://bl.ocks.org/mbostock/950642

Here's something I hacked together quickly to show how Graphlib and d3 could be used together: http://jsfiddle.net/URPub/2/

Most of the work is on the D3 side.

from dagre-d3.

cpettitt avatar cpettitt commented on August 29, 2024

Did you get a chance to look at the above? My main concern is that there is less structure around what we can assume when trying to render the force directed graphs. If you have thoughts on what you'd like to see as a consumer maybe we can work together to put together some helpers in dagre-d3.

from dagre-d3.

dominictarr avatar dominictarr commented on August 29, 2024

oh, sorry, I've been super busy (because realtimeconf )
but that is done now, so I can catch up with this stuff.
I think I'd rather publish another module for force directed d3 layout.
I did get something working - I'll see if I can git it up

from dagre-d3.

cpettitt avatar cpettitt commented on August 29, 2024

Cool talk at realtimeconf! I'm interested to see where you take cyphernet.

Making a separate module makes sense. Definitely let me know if there is anything I can do to help.

from dagre-d3.

 avatar commented on August 29, 2024

Was there any change in this topic?
An easy configurable force layout, like this http://bl.ocks.org/d3noob/5141278 would be nice for those (like me) who need a fast solution and don't want to learn d3 in one day.

from dagre-d3.

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.