I have this graph:
digraph Database {
graph [bb="0 0 180 96",
fontname="Verdana-Bold",
fontsize=14,
labeljust=r,
labelloc=t,
margin=12,
nodesep=0.5555555555555556,
pad=0.5,
rankdir=RL,
ranksep=0.3472222222222222,
sep=0.05,
splines=spline
];
node [fixedsize=true,
fontname=Verdana,
fontsize=11,
height=40,
label="correct me",
labelloc=c,
margin=0,
shape=box,
style=rounded,
width=100
];
Node1 [fontsize=14.0,
height=1.3333333333333333,
label="Here a long enough
example of a node.
Unfortunately, the text
won't remain in the box",
width=2.4944932725694446];
}
which produces this output:
Why is that so? (not sure why picture itself is so small)
The text/label should be centered (labelloc=c) but isn't.
You are using fixedsize=true:
If true, the node size is specified by the values of the width and
height attributes only and is not expanded to contain the text label.
Therefore, if you want to be sure that the label is contained within the node shape, do not use fixedsize=true.
However, this doesn't explain why the label isn't centered, and makes me wonder about the version of graphviz you are using. Tools like http://viz-js.com/ display the label centered (select png output).
On a side note, labelloc=c is for vertical alignment of the label.
Apparently, this code is created with some "tool" that adds lots of nonsensical stuff to the code. graphviz, if instructed in clear and simple terms, doesn't have that problem:
digraph Database
{
Node1 [ shape = box, style = rounded,
label="Here a long enough example of a node.\nUnfortunately, the text won't remain in the box"]
}
yields
How does this help you? If you want to create a graph with your tool, you will need to find out how to fine tune the settings in a way that it does what you want. Or you start (which would be my recommendation) working with graphviz directly. Then, you could start with the basics and move to the more complicated formatting options only when and to the extent actually needed.
Related
I would like to put a box around a text run in Powerpoint. Specifically a border. For example, a word might have a light green background (done by highlighting) and a thin black border line.
I've solved the "highlighting with a light green background" part - using a RGB value. That's fine.
Is it feasible to draw a box boundary line round a run?
I'm specifically looking for an example XML fragment - if this is feasible. (I use python-pptx and augment it with my own XML confection.)
I don't believe so Martin. A run is not a shape, so it doesn't have a border that can be turned on or off or given a color. You can find an excerpt of the XML schema showing what elements and attributes can go in a run-properties element (<w:rPr>) here: https://python-pptx.readthedocs.io/en/latest/dev/analysis/txt-font-underline.html?highlight=CT_TextCharacterProperties#related-schema-definitions
It can have a ln child element, which corresponds to a pptx.dml.line.LineFormat object, but that's going to set the format of the font "outline", like if you want the interior of each letter to be a different color than its outline. You could create a LineFormat object for a run if you wanted to experiment with it using line = LineFormat(run.font._element).
The other test would be whether you can do such a thing from the PowerPoint application UI. If you can't do it on Windows PowerPoint, it's very unusual that you can do it from the XML (although there are a few cases). Mac PowerPoint can't do everything Windows PowerPoint can, so that's less of a compelling "proof".
It seems not possible to view the exact margin between font-elements in XD (dev-view). Below you'll find a screenshot of a situation where we need to measure the exact distance between two Font-elements (XD developer-view).
It needs to bypass the line-height, but it doesn't. To be able to do this, we need the line-height to be zero. But when we edit the line-height in XD for a word or sentence on a single row, XD does not change that line-height.
Anybody encountered the same situation?
In this example the line-height is 32. We go to XD. Change it to zero, save it and SHARE FOR DEVELOPMENT. But the line-height remains 32. Also changing it to 1 instead of zero won't make any difference.
To fix this issue, you have to select the Text within Adobe XD. Right Click and select Path > Convert to Path. The margins around the Text will disappear and when in DEVELOPMENT view it becomes possible to see the right margin. A small problem remains. When you want to edit the text when it's a shape, you have to delete it and place a new text and turn it into a shape again. the text when converted to a shape
The default selector in Adobe XD will not give you the exact margin between two text. You have to convert the text layer into paths (Convert to Outlines) to get the exact margin.
But remember after converting text layer into path the text cannot be edited because now the letter are separate vector shapes.
To convert text layer into Path, select the layer and goto Object>Path>Click Convert to Path
You can use the Guides to drag one below your text and another one on top of the second text, and then you can see the distance between the 2 guides.
Check this youtube video for a quick tutorial on it. This is going to be a manual action. I don't think there's a key to press to check the distance automatically.
I've managed to create some graph using dagre-d3 graph layout library. The library works wonderful but seems a bit lacking in documentation.
My graph really looks like this example: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html
What I really want to do is to customize the edges so they will look like this picture:
So, basically, I need to customize the svg path element representing the edge. I did some research and it seems possible to use graphviz styles (arrows, colors, etc) but hasn't found any way to customize the connection path itself.
Is it possible to customize it somehow?
Check out this graph. It shows how to use styles on edges, change the way the edge is layed out (lineInterpolate), and how to remove the arrowhead.
For more details on styling, see https://github.com/dagrejs/dagre-d3/wiki#demos. In particular, the following may be helpful:
Style attributes: https://dagrejs.github.io/project/dagre-d3/latest/demo/style-attrs.html
Built in shapes: https://dagrejs.github.io/project/dagre-d3/latest/demo/shapes
Built in arrows: https://dagrejs.github.io/project/dagre-d3/latest/demo/arrows.html
User defined shapes and arrows: https://dagrejs.github.io/project/dagre-d3/latest/demo/user-defined.html
tl;dr: Adding the property lineInterpolate: 'basis' while setting your edges will draw curved edges. For example,
...
g.setEdge('A', 'B', { lineInterpolate: 'basis' });
...
See this PR for more details.
I am not having success displaying an image at a node in dot.
My node is defined:
SW103 [image="swOpen.png"]
I can view swOpen.png so I think the file is ok, and it is in the same directory as the code. But dot displays the node using its label "SW103", not as the image.
The documentation mentions that the image file should have size information in it, but I don't know what to put in it.
Could someone point me to an actual example that displays a .png or .bmp file as a node? (include the image file, if I need to add sizing to it)
Using a graphviz snapshot from May 2011 (2.29), the following syntax
digraph g{
imgnode[image="apple-touch-icon.png", label=""];
}
results in
You'll need to set an empty label to prevent the node name from being displayed.
If this is not working for you, you may check the output of dot (something like dot -Tpng -o graph.png graph.gv) - if dot can't find the image, you should be able to see an error message.
I did not have to specify any size (I think this is for svg).
For one node you can use the below sample:
xxx.node(SW103 , color='red', image="swOpen.png")
It changed image of SW103 node.
I have a project using various members of Wikipedia's grey maps: http://en.wikipedia.org/wiki/Wikipedia:Blank_maps. I fill them in with colors depending on which countries, states or provinces a user selects by clicking on the shape or by checking a checkbox.
I would like to write a script that creates imagemaps automatically of each country, state or province by somehow getting the X and Y pixel location of the borders of a country, state or province albeit without the names of these entities, which I will fill in later. I have already done the World map by hand and found a open source US map image map demo. I would now like to create my maps more rapidly.
I use PHP and GD to floodfill the shapes, so I guess I could use one central pixel location of the shapes as well. Any suggestions? This script is a possibility but is still somewhat manual: http://abhinavsingh.com/blog/2009/03/using-image-maps-in-javascript-a-demo-application/. Also Mapedit, http://www.boutell.com/mapedit/, has a magic wand feature that works pretty well, but again I have a feeling this can be done automatically.
An almost perfect solution to this issue is by using SVG images and this translator of the svg code to imagmap area tags: http://www.electricfairground.com/polygonator/. The result is an appropriate image map, although the svg image may need to be resized, and the countries or provinces all seem to be offset and occasionally jumbled up. So this require opening a page generated with the SVG image or exported PNG copy of the SVG file, in a wysiwig editor that allows you to move imagemap elements.
I'm trying to figure out what the pattern of the offset is and if I do I'll post it here: http://wherehaveibeen.info/images/polye.html. The author of the "Polygonator" clued me into his service and using svg map images from his article here: http://www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/. He advocates there, the tracing of png images into svg images via Inkscape. But since Wikipedia already has maps in SVG format, why not go straight to the code? It turns out that svg files basically already have the polygons separated and the border regions speciied, at least in the Wikipedia grey maps, http://en.wikipedia.org/wiki/Wikipedia:Blank_maps, they just need some cleaning up with the Polygonator.
I found if I opened up the SVG code in Notepad++ i could copy and paste in the entire contents of the SVG file and the polygonator will remove the unneeded code. A little clean up of the imagemap area tags is required afterwards but not much. The biggest problem is the mentioned generated area tags regions offests and the occasionl jumbled up overlapping locations of the imagemap areas in the generated code.
Well the real answer here appears to be that SVG files are almost imagemaps already and can be mildly processed to turn them into imagemaps, and Wikipedia certainly has plenty of SVG maps.
There are at least three projects that attempt to do this, with only some success at the moment. I'm kind of more interested in making an SVG file processing online image mapper service now that so might work on that project instead of just the map coloring one:
Polygonator - described here: http://www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/ but the actual service is here: http://www.electricfairground.com/polygonator/index.html - is the simplest and best service or software so far I think. You have to manually dump the SVG XML text into the input field, but despite what the author says, I think you can dump the entire SVG file in the in field, not just the "M-z tag". The resulting area tags need editing to remove empty ones without coordinates and polygons with only two points.
Inkscapemap - http://sourceforge.net/projects/inkscapemap/ - chokes on complex SVG files such as those with shading. Also I couldn't get it to display as an HTML service even though I followed advice about using the main class of the jar file which I found described in the manifest file as well referring to the main jar file and the support file in an "archive" attribute.
http://davidlynch.org/blog/2008/03/creating-an-image-map-from-svg/ - very interesting project with many blog comments. The image maps again are not quite perfect and need editing.
I see I can use GD PHP's imagecolorat and cycle through all the pixels to find those that are black. This works:
<?php
$im = ImageCreateFromPNG("india.png");
$width = imagesx($im);
$height = imagesy($im);
for ($cy=0;$cy<$height;$cy++) {
echo '<p>';
for ($cx=0;$cx<$width;$cx++) {
$rgb = ImageColorAt($im, $cx, $cy);
$col = imagecolorsforindex($im, $rgb);
if ($col["red"] == 0 && $col["green"] == 0 && $col["blue"] ==0){
echo $cx.", ".$cy." ";
} else {echo "";}
}
}
?>
Can anybody suggest how to find the polygons in the huge multipolygon complex that results from running the above code on say a black and white 2 color map of India, where all the borders are black and the interior of the states and Indian Ocean is white??
Here is image of India: http://wherehaveibeen.info/images/india.png and the mess now of the coordinates for the imagemap that needs to be split up into separate polygons: http://wherehaveibeen.info/images/black.php