![]() ![]() If you're interested in the PR, then you could mention this approach in your tutorial as an alternative for >=3.2.0 users. In future we could autogenerate a URI if passed a, , or reference. Whatever makes it easiest to do and whatever makes the code easier to read. ![]() You could use the SVG API manually or any lib that you prefer. Yes, you need to create a data URI at the moment. Would the recommended way be to use a tool such as snap.svg to create a new SVG element, cache it, call it for the various graph elements, convert the generated SVG to a string, convert XML string to URI, and pass the data URI to Cytoscape.js? Get color code in cytoscape how to#The one part of this I'm not clear on is how to generate this SVG on the fly. The second is where multiple images are used on a normal node shape to add markings, decorations, etc. Cache the SVG-generation function (something like Lodash's memoize?) so that (re)rendering many identical nodes can reuse previously-calculated results. Made the node entirely transparent to see background SVG. Chose a node shape that is similar to the background content so that hit tests for the node serves as a proxy for hitting the background SVG. Use a background SVG image so that scaling is not an issue. No, that's just to let you know when a new frame is drawn. In either case, you'll need to figure out dimensions for the node yourself - probably based on the svg It might be a good idea to have a tutorial on this topic, along with best practices - e.g. You can alternatively use multiple background images on the node shape. Just make the background shape transparent and choose the node shape that best approximates your node for hit tests etc. An svg is pretty well as customisable as a dom node and it's drawable for canvas (and cacheable as a bitmap). You can do all the rendering for nodes yourself if you want as an svg background image. ![]() Even if it did, it would be very slow as (iirc) there's no way to get a bitmap of the dom. That approach wouldn't work very well in the case of this lib. I like Cytoscape's clear concepts and API, mature implementation, and excellent documentation very much. Would Cytoscape's render event be the basis for customizing the node rendering? To me Cytoscape is very strong on edge rendering, but falls back when it comes to node rendering flexibility. I've evaluated several graph libraries, and Cytoscape seems to be the only one which supports both out-of-the-box, interactive parallel edges (multigraphs), and interactive self-edges. (I did that in my former application and it works very well, but it lacks parallel edges, and self-edges.) Are you aware of a Cytoscape plugin that goes for this hybrid approach? I'm sure you (and others) already have considered a hybrid approach: using the canvas for edge rendering and superimpose it with a DOM layer for the node rendering. I guess the DOM would be more appropriate here but is in contrast to Cytoscape's canvas based approach. What approach would you generally suggest to customize individual node rendering beyond style properties? I mean node renderings and interactions programmatically created by the user? Like a customizable per-node render function. But still, the horizontal padding needs to be larger than the vertical padding. Yes, I can use text-margin-x to move the label to the left. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |