Similarly to this forum thread, I'm getting a NullPointerException when exporting a graph to SVG. It doesn't happen with all graphs, but once it happens for a particular graph, no amount of closing and re-opening the .gephi file will let me export.
Unlike the forum thread, getting rid of spaces in node labels doesn't help me. In the log file, there's a very suspicious line:
***** CSSEngine: exception property.syntax.error:org.w3c.dom.DOMException: The "stroke-width" property does not support dimension values.
AttrValue:3.7186165E-4
Exception:org.w3c.dom.DOMException
Since SVG is all about web pages, this looks like a plausible issue. This forum post seems relevant. Here's a quote from it:
Batik is correct in rejecting the content, although it is a bit
confused in the error message. 'stroke-width' is a CSS property and
as such can not use scientific notation, as you quoted (silly yes, but
that is what CSS2 has said for a long time). The error comes because
Batik is trying to interpret 'e-03' as a unit (like 'em' for example).
Any thoughts on how I can export my beautiful Gephi image to SVG?
The number values in SVG properties (as with CSS properties) do not support scientific notation.
The error message indicates that somewehere in your file you have that stroke-width value (3.7186165E-4).
This is obviously a bug in the gephi SVG exporter. You should report it to them.
In the meantime you could fix it with a text editor. In the above example you would need to find the element with:
stroke-width="3.7186165E-4"
and change it so that it doesn't use scientific notation:
stroke-width="0.00037186165"
Note that if there is one, there may be others. Hopefully not too many! Note that other occurrences may not necessarily be on a stroke-width attribute.
Related
How do I change the size and position of buttons or other UI elements in a GUI created with the threepenny-gui package?
The documentation of Graphics.UI.Threepenny.Attributes lists some functions which are probably useful, such as coords :: WriteAttr Element String. However, I don't understand how to use them. Specifically, I don't understand what the String argument is supposed to be.
Thanks
I think my misunderstanding that I had was that my problem was not actually related to threepenny-gui but is instead a question about HTML. This link helped my find the answer I was looking for: https://www.geeksforgeeks.org/html-attributes/
Just in case anyone else is struggling with this as well, this line (mostly) solves it:
# set UI.style [("text-align", "center"),("color","red"),("font-size","30px")]
(The UI in UI.style comes from: import qualified Graphics.UI.Threepenny as UI)
Threepenny UI element combinators translate more or less directly to HTML, and so you should think in terms of HTML when doing layout with it:
The attributes from Graphics.UI.Threepenny.Attributes you mention are HTML attributes. Modifying them while defining your initial layout is typically done with set. (By the way, if you need a reference for looking up what things like HTML attributes do, you can't do wrong with MDN.)
For CSS styling, you can use the (#.) combinator.
As for layout, the basic tools are (#+) to nest HTML elements, and grid, row and column to arrange div-based grids.
I would like to add tooltips (or hovering behavior) on SVG diagrams generated by diagrams.
Is there a way to add custom properties to a diagram , or worst comes to the worst be able to set and id to things, so they can be referred to in Javascript.
The question is slightly misleading because the title property that gives tooltips on SVGs in browsers is not an attribute, but an element of its own. You add tooltips, that is SVG titles, with the method svgTitle in Diagrams.Backend.SVG.
The same module also contains methods svgID and svgClass to add these attributes to allow external javascript to find specific SVG elements.
I kept googling, and havn't tried it yet, but I found this. It seems to exist to exactly satisfy your need.
It is SVG backend only.
I am having issues with inconsistent SVG rendering of what seems to be a basic file between browsers. I need to find a way to make this SVG cross-browser, but can't seem to pinpoint the problem. Firefox 23 and Inkscape issues go away if the stop-color statements for the gradients are moved from the CSS to style = style="stop-color:#XXXXXX". Sadly, this is not an option because of the way this file will be used. This file validates on the W3C validator, and seems to only use simple features, but rendering is inconsistent. What is wrong?
I am not allowed to post images yet, so here is a link to an image showing the problem:
http://www.flickr.com/photos/95652985#N07/9754841655/lightbox/
SVG Source is here:
https://dl.dropboxusercontent.com/u/11366066/fire.svg
Thanks for help with this baffling problem!
I think your coordinates x1,y1, etc (for instance
<linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0"
x1="32093.5" y1="4749.35" x2="37189.8" y2="4749.35">
)
could exceed the user space bounding box, thus got wrapped in Chrome, and clipped in Firefox, etc (also my Ubuntu SVG viewer get the same results as Firefox).
A bit of philosophy: SVG, like HTML, is required to be tolerant in rendering, then is common to have different behaviours where the 'simpler' specification is extendend (actually SVG is far from simple)
Edit: my SVG viewer reports as dimensions: 4252 x 2835 pixels 74,2 kB 34 %. Even if we multiply 4252 * 3 we are far below the x1,x2 values....
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text
In the past I've using graphviz's node "label", "URL" (or "href") and "tooltip" attributes to generate SVG graphics where the nodes have the text label, mouse-over displays the tooltip, and clicking the node (assuming your browser is displaying the svg) takes you to the URL target (and all those strings can be different).
Right now I'm trying to generate the same sort of thing in Cytoscape. Exporting svg works nicely, but linkage of nodes to external URLs seems all tied up with Cytoscape's "linkout" feature; while this seems very powerful while you're actually using Cytoscape, it's not clear to me whether there's some way of getting it to produce clickable nodes or labels (I'd settle for either) in an exported SVG. The URLs I want to link to are a node attribute of my imported graph.
Is there something I'm missing in Cytoscape which will create links in exported SVG ? Any suggestions for alternative approaches ? e.g some way of getting labels to be arbitrary HTML including <a href=...>...</a> ?
My "plan B" is to postprocess the exported SVG, but it'd be nicer to have Cytoscape do it all.
So far as my further use of the tool permitted me to determine, Cytoscape just doesn't have this capability.