Showcase

Demonstration with edge labels, custom nodes and a dummy tool tip.

Application using the Dijkstra algorithm to search the shortest paths from Berlin to any city in the world.

50 replies on “Showcase”

Anybody his journey brought him here in 2020 take care that this marvellous library imports the raphael-min.js file and this file name was changed in the latest Raphael project to raphael.min.js

Hello,
You can customize the color of nodes by making the following changes.
In the dracula.dev.js file:
1- The function addNode(id, nodeData) must be modified as follows.
value: function addNode(id, color, nodeData) { // Revised by me
// Node initialisation shorthands
if (!nodeData) {
nodeData = isId(id) ? { id: id } : id;
} else {
nodeData.id = id;
}
if (!nodeData.id) {
nodeData.id = (0, _uuid2.default)();
// Don’t create a new node if it already exists
} else if (this.nodes[nodeData.id]) {
return this.nodes[nodeData.id];
}
nodeData.color=color; // Added by me
nodeData.edges = [];
this.nodes[nodeData.id] = nodeData;
return nodeData;
}
2- The function drawNode(node) must be modified as follows.
value: function drawNode(node) {
//var color = Raphael.getColor(); // Removed by me
var color = node.color; // Added By me
// TODO update / cache shape
// if (node.shape) {
// node.shape.translate(node.point[0], node.point[1])
// return
// }
if (node.render) {
node.shape = node.render(this.canvas, node);
} else {
node.shape = this.canvas.set();
node.shape.push(this.canvas.ellipse(0, 0, 30, 20).attr({ stroke: color, ‘stroke-width’: 2, fill: color, ‘fill-opacity’: 0 })).push(this.canvas.text(0, 30, node.label || node.id));
}
node.shape.translate(node.point[0], node.point[1]);
node.shape.connections = [];
dragify(node.shape);
}
3- Then you can specify the color of nodes with the instructions below.
g.addNode(‘node1′,’#000’);

Hi,
How can I capture my designed graph as a picture?
html2canvas cannot provide the screenshot from it.
please help me.

Hi,
To set the color of the nodes, you must modify the function addNode(id, nodeData) in the file dracula.dev.js as follows:

value: function addNode(id, color, nodeData) { // Modified by me
// Node initialisation shorthands
if (!nodeData) {
nodeData = isId(id) ? { id: id } : id;
} else {
nodeData.id = id;
}
if (!nodeData.id) {
nodeData.id = (0, _uuid2.default)();
// Don’t create a new node if it already exists
} else if (this.nodes[nodeData.id]) {
return this.nodes[nodeData.id];
}
nodeData.color=color; // added by me
nodeData.edges = [];
this.nodes[nodeData.id] = nodeData;
return nodeData;
}

Furthermore, you must modify the function drawNode(node) in the file dracula.dev.js as follows:
value: function drawNode(node) {
//var color = Raphael.getColor(); // Removed by me
var color = node.color; // added by me
// TODO update / cache shape
// if (node.shape) {
// node.shape.translate(node.point[0], node.point[1])
// return
// }
if (node.render) {
node.shape = node.render(this.canvas, node);
} else {
node.shape = this.canvas.set();
node.shape.push(this.canvas.ellipse(0, 0, 30, 20).attr({ stroke: color, ‘stroke-width’: 2, fill: color, ‘fill-opacity’: 0 })).push(this.canvas.text(0, 30, node.label || node.id));
}
node.shape.translate(node.point[0], node.point[1]);
node.shape.connections = [];
dragify(node.shape);
}

Then, you can set the color of nodes when design your graph as follows:
g.addNode(‘n1’, ‘#000’);

hi first thanks for your library ..it is wonderful..but i have a problem..i want to show every nodes connections but i cant access to nodes without inserting their labels..is there a way that i i can do this?

You have a very fine library but I didn’t use it for lack of event handlers.

Is there any chance you could add the ability to have event handlers for clicks on nodes and edges? Your lib contains pretty much everything else, it’s easy to use, but lacks that.

Just a suggestion… 🙂

Thanks and keep up the good work!

Hi,

I’m interested in using your graph . but it is showing the id numbers in the field. Is there a way you can avoid getting displayed?

Hi there,

I’ve been trying to set a custom render function for some of the nodes that should be rectangular and not elliptical. After changing the render function the edges disappeared.
The render function I used was based on the algorithms case:

    sampleRender: function(r, n) {
        var color = Raphael.getColor();
        var rectangle = r.rect(n.point[0]-30, n.point[1]-13, 62, 66).attr({"fill": color, "stroke": color, "stroke-width": 2, r : "9px"});
        rectangle.node.id = n.label || n.id;
        var set = r.set().push(rectangle).push(
            r.text(n.point[0], n.point[1] + 20, n.label));
        return set;
    },

Can you help me to figure out the problem?
Thanks in advance

Not explicitly, but if your data clusters, it will also show up as a cluster as well. The edges that hold the clustered nodes together will also pull the nodes together. Just try it!

Is it possible to show the alignment lines with this example. I mean when a drag a shape to near another one display the alignment lines. It would help in exact placement of shapes

hello, here is my question:how can I click a node and invoke an event, say junp to another page? Waiting for your reply~~

Great work, I am really impressed by your work!
One question comming up here:
Is there any way to cleanly remove a node and its edges from the graph. Actually I tried the method “graph.removeNode(id)” but it won’t render the graph properly.
I tried to just build up a new graph, but somehow this won’t work neither.

I would be really happy to get some hint on this issue. Thank you so much for your work!

Best regards,
Mirco

Hi, is there a way to visually connect the nodes? I’m also seeing jsplumb but I’d like to use this library…

Great work!
Thanks

Graph edges are not rendered on IE9 🙁

Any chance you fix this? Otherwise we cannot use Dracula Graph on our project while the visualization and look&feel is exactly what we need.

Thanks

Hello!

I like what you’ve done.
ButI wonder that if there is a way to control the color of the node which I created.

Thanks！

var render = function (r, n) {
/* the Raphael set is obligatory, containing all you want to display */

var ellipse = r.ellipse(0, 0, 30, 20).attr({ fill: “#31B404”, stroke: “#31B404”, “stroke-width”: 2 });
/* set DOM node ID */
ellipse.node.id = n.label || n.id;
shape = r.set().
push(ellipse).
push(r.text(0, 30, n.label || n.id));

return shape;
};

Can i put the nodes in a specific position?? , x and y positions!

what part of the Graph.Renderer.Raphael i need to modify??

Thanks! its very important to put the nodes in a specific position!

Hello!

It’s a great library and I would love to use it. Therefore I have got 2 questions:
1) Is there a way to achieve a hierarchical order, is something already implemented or can it be (easily) added myself?
2) Is it possible to avoid the automatical reordering of the graph by redrawing?

Cheers
Alexander

I saw in your example.js

g.addNode(“Wheat”, {
/* filling the shape with a color makes it easier to be dragged */
/* arguments: r = Raphael object, n : node object */
shapes : [ {
type: “rect”,
x: 10,
y: 10,
width: 25,
height: 25,
stroke: “#f00”
}, {
type: “text”,
x: 30,
y: 40,
text: “Dump”
}],
overlay : “Hello World!”
});

Is that for creating the hyperlink? I tried but it didn’t work for me yet.

No, that was just for an overlay effect. You can create your own render function (see an example in the documentation) and try to set a click event on the label – or select the label via jQuery. Hope it won’t mess up with the dragging. I would like to hear your experience on this! Thanks and good luck.

Hi,

Thanks a lot of making the tool. It is simple and nice.

is there any plan to extend it to have clickable link/node with hyperlink?

Hi there!

Thanks for Graph Dracula. It’s great.

One question: Is it possible to span an edge label across multiple lines? In nodes i can use “\n”. In edges this does not work… 🙁

Thanks in advance for your replies!

Best regards,
Boato

No, unfortunately this does not yet work. I’ll put it on my list! Hope you enjoy the library anyway!

Hi,

do you still develope on this issue ?
I also have the requirement to split the label into more than one line.

Thank you

I would like to customize the edge drawing code, especially label drawing, and also make each label clickable. Will share if this succeeds.
By the way it is horrible how Raphael does not directly support SVG. SVG import libraries didn’t work for some reason. Anyway.

Hey Sharry,
I haven’t uploaded these changes anywhere.
The code is still a bit rough, but it works.
I’ll try to upload on GitHub soon. Should I branch out from Johan Philipp’s repository? (see, I’m not very handy with source control yet)

Hey there! Yes, forking from my repository on Github is the right way. This will make it very easy for me to integrate your changes into the main branch. Thanks a lot in advance!

By Post Author

I think what you’ve got here looks very promising, but the examples don’t appear to work in IE8. Given that 90% of my audience must use IE8 (work requirement), that means I won’t be able to use GraphDracula. Do you intend to accommodate IE8’s peculiarities some time soon?

Thanks,
Jen

Sorry,forget to post another question.

I have thought about to create more than one edge between two nodes for I think there can be more than one relationship between them. Is it possible? It would be best if you can give me an example codes.

Thanks again

Dear Author,

As I can see there is already an example about showing labels with animation on the nodes. Is it possible to make the label which on the Edge shows only on hover?

Thank you~

P.S.

I know that as from Jake Stothard’s merge, the

removeNode()

should work, but it seems broken anyway, e.g. the node is removed from the graph’s data structure, but remains on the rendered Raphael canvas.

Johann hi,

I am using your library in a big GWT project, and needing support for

graph.removeNode(id)

/

graph.updateNodeContent(id, content)

in the API, since i had only partial success in implementing these myself (all seems fine and the graph updates, but the Raphael fails to re-render).

is it coming soon, or is it in the roadmap?

Thanks in advance, Eliran.

How did you use this with GWT? Did you write a wrapper for the js?
I want to use it with GWT either. Can you share your experiences?
Thanks in advance!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.