fkling / JSNetworkX

Build, process and analyze graphs in JavaScript (port of NetworkX)
https://felix-kling.de/jsnetworkx/
Other
761 stars 184 forks source link

Does JSNetworkX support any other shape than circle? #11

Closed jinxiaoye1987 closed 9 years ago

jinxiaoye1987 commented 11 years ago

Does JSNetworkX support any other shape than circle?

fkling commented 11 years ago

You can use a different shape via the node_shape configuration option. It has to be a valid SVG element name and you have to set the correct attributes for that element. However, due to the way how the nodes are positioned, it does not work well with all shapes (e.g. rectangles). This will be fixed in the future though.

Here are examples I created as response to a similar question:

While it works with other values (i.e. other shapes), there is a big drawback: It only works well with shapes which are positioned at their center. This works for circles and ellipses but not with rectangles.

Here is an example with an ellipse:

node_shape: 'ellipse',
node_attr: {
    rx: 10,
    ry: 5
}

The "ellipse" SVG element (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse) needs the two attribute "rx" and "ry" which define the dimensions of the ellipse, just like "r" defines the radius of the "circle" element.

Demo: http://jsfiddle.net/VthRT/

In contrast, here is an example with a rectangle, a "rect" SVG element (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect)

node_shape: 'rect',
node_attr: {
    width: 10,
    height: 10
}

I think the attributes are self explanatory. As you can see in the demo (http://jsfiddle.net/VthRT/1/), this does not look great because the rectangles is positioned at their top left corner, not at their center.

Unfortunately in the current version it won't be possible to position the rectangles properly, but am currently updating the visualization API and this is something I will consider for the update.

Theoretically, you could use "circle", "ellipse", "rect", "line", "polygon", "polyline" and "rect" as values for "node_shape", but only "circle" and "ellipse" will look somewhat acceptable. For more information about those elements, I would refer you to the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/SVG/Element.