Marking/labeling node-edge connection points with graphviz - layout

With Graphviz, I know I can label edges and vertices. But what if I want to label some of the connections? That is, label some points where a specific edge meets a specific vertex? Is that possible?
Notes:
I don't care about beatuy/visual styles, I'll take something plain and dirty(ish)
I would very much rather not use "tricks" such as spacing out the vertex label to make some of the text appear next to the connection points and similar approaches.

You can use the taillabel and headlabel edges attributes. For example:
digraph G {
rankdir="LR";
a->b [taillabel="from"; headlabel="to"]
b->c [taillabel="from"; headlabel="to"]
}
produce:

A clear way to label where something is leaving or coming into a node is to use "port"-like constructs inside the source/target nodes. Some ways to achieve this:
subgraph.dot
digraph {
subgraph cluster_house {
label="House"
hcw [label="Clean water"]
hdw [label="Dirty water"]
}
subgraph cluster_street {
label="Street"
scw [label="Clean water"]
sdw [label="Dirty water"]
}
scw -> hcw
hdw -> sdw
}
Docs: https://graphviz.org/docs/attrs/cluster/
struct.dot
digraph structs {
node [shape=record];
rankdir=LR
house [label="<l> House|<cw> Clean water|<dw> Dirty water"];
street [label="<l> Street|<cw> Clean water|<dw> Dirty water"];
street:cw -> house:cw;
house:dw -> street:dw;
}
Docs: https://graphviz.org/doc/info/shapes.html#record
I don't know how to make the headers stand out however with this approach: graphviz: record node with a bold title
html.dot
digraph structs {
node [shape=plaintext]
house [label=<
<table border="0" cellborder="1" cellspacing="0">
<th><td><b>House</b></td></th>
<tr><td port="cw">Clean water</td></tr>
<tr><td port="dw">Dirty water</td></tr>
</table>>];
street [label=<
<table border="0" cellborder="1" cellspacing="0">
<th><td><b>Street</b></td></th>
<tr><td port="cw">Clean water</td></tr>
<tr><td port="dw">Dirty water</td></tr>
</table>>];
street:cw -> house:cw;
house:dw -> street:dw;
}
Docs: https://graphviz.org/doc/info/shapes.html#html
Tested on Graphviz 2.42.2, Ubuntu 22.04.

Related

How do you change the font background color of just part of a GraphViz label?

I am trying to highlight a specific word/words in a GraphViz label. I know how to change the font color for individual text, but I can't figure out how to change the text background color instead. So, for example here, I would like to have this label with just the word "love" with a red background. Is this possible?
digraph G {
"A" -> "B" [label=<This is my label <br/> It has line breaks. I<FONT COLOR="Red">love</FONT> background<br/>Colors.>]
}
Is this possible?
It requires creating an HTML table with one cell with desired background color.
digraph G {
"A" -> "B" [label=<This is my label <br/> It has line breaks. I <FONT COLOR="Red">love</FONT> background<br/>Colors.>]
C [label=<<TABLE BORDER="0" CELLBORDER="0" CELLSPACING="0">
<TR><TD COLSPAN="3">This is my label </TD></TR>
<TR><TD>It has line breaks. I </TD><TD BGCOLOR="red">love</TD><TD>background</TD></TR>
<TR><TD COLSPAN="3">Colors</TD></TR>
</TABLE>>]
}
Giving:

Have caption run only as wide as the table on centered table

I'm using XSL-FO with Antennahouse FO formatter.
How do I make the fo:caption in a fo:table-and-caption element run only as wide as the fo:table does?
Essentially, I am looking for the FO equivalent of this HTML:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image with Caption – CENTERED</title>
</head>
<body>
<div style="border:2px solid blue;">
<table style="border:1px solid green; margin-left:auto; margin-right:auto;">
<caption style="caption-side:bottom; text-align:left; border:1px solid red;"><p style="font-size:9pt;">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</p></caption>
<tr>
<td><p><- The table runs only this wide. -></p></td>
</tr>
</table>
</div>
<p>BLUE = wrapper-DIV</p>
<p>GREEN = table</p>
<p>RED = caption</p>
</body>
</html>
which looks like this:
The XSL-FO code I have is this:
<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master margin-bottom="58px" margin-left="120px" margin-right="120px" margin-top="50px" master-name="content-page" page-height="11in" page-width="8.5in">
<fo:region-body margin-bottom="44px" margin-top="50px" region-name="xsl-region-body" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="content-page">
<fo:flow flow-name="xsl-region-body">
<fo:block>
<fo:table-and-caption border="2px solid blue" text-align="center">
<fo:table-caption border="1px solid red" caption-side="bottom">
<fo:block font-size="8pt" text-align="left">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</fo:block>
</fo:table-caption>
<fo:table border="1px solid green">
<fo:table-column/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block><- The table runs only this wide. -></fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:table-and-caption>
</fo:block>
<fo:block>BLUE = fo:table-and-caption</fo:block>
<fo:block>GREEN = fo:table</fo:block>
<fo:block>RED = fo:caption</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
which renders like this:
How do I force (in XSL-FO) the table caption to only run as wide as the table (which might be arbitrarily complex, including e.g. fo:table-footer and table borders on table or cells), and start at the left edge of its associated table (like in the HTML rendering)?

Initialize from html table

I have been trying to make an org chart using the code from this example http://www.getorgchart.com/Demos/Initialize-From-HTML-Table
I am making my table dynamically from xml data (planning to do this for many different xml files so thats why I haven't hardcoded the table). The result does not look right and I'm not sure whats going wrong. I suspect that maybe its trying to make the org chart before my table is made. I have no console errors and I get a plain blue screen with the search bar and arrows when I try to run everything.
Here is my html code:
https://pastebin.com/6b1d0gEC
<body onload="getXML()">
<div id = "conditions"></div>
<div style="float: right; width: 10%; height:100%; text-align:center; display: none;" ></div>
<table id="orgChartData" >
<tr>
<th>title</th>
</tr>
<tr>
Here is my JS code
https://pastebin.com/c7fFerqH
Here is the XML im using to generate the table
https://pastebin.com/0k3xQ5Th

Footable - client wants column width to remain constant between pages

When you have multiple pages of data in a Footable, the column width changes as you page through the data, depending on what appears in each column at any given time. This is ugly.
I think my client's request means I will not have responsive tables, but maybe there is way out of this that I don't see.
Footable handles pagination client-side. Technically, it should be possible to "lock" the column width from the first page and force it to remain the same throughout the data. I don't think Footable has this option, though.
$(function () {
$('.footable').footable();
});
This jsfiddle illustrates the issue (the jsFiddle CSS interferes with mine a bit because it has Footable classes, too).
I could specify the width of the columns in % - that seems to work even when column are hidden as the viewport shrinks.
Does anyone have another/better suggestion?
I am not able to reproduce your problem and the jsfiddle is not paging the footable.
Still, I had a similar problem with column width when I generated the table content after an AJAX call. The solution I found was to apply a class to every cell in the nTH column and then define the width = max-width min-width.
I've added a class to your subject header and defined css for this column ...
http://jsfiddle.net/bgil2012/gHsdE/
<table class="footable" data-page-size="5">
<thead>
<tr>
<th data-toggle="true">Product</th>
<th data-hide="phone">Study Id</th>
<th class="study-title" data-hide="phone">Study Title</th>
<th class="column_condition" >Condition</th>
<th>Results</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tysabri</td>
<td>001-06-NAT</td>
<td class="study-title">ENER-G Tysabri fatigue and cognition</td>
<td class="column_condition" >Multiple Sclerosis</td>
<td>CSR Synopsis</a>
</td>
</tr>
CSS:
.study-title {
max-width: 20px;
min-width: 20px;
width: 20px;
}

Basic questions about Susy and an odd behaving span-columns()

After getting Susy running in Codekit, i was finally able to try around more thoroughly. I am right at the start with the whole grid and Susy thing. So i tried to apply a Susy grid to a design of a recent website i try to build for exercising purpose. But quite a few questions arose about Susys behaviour as well as about best practices in a few edge cases which haven't been covered in the scenarios on the Susy homepage. My markup looks something like that:
<div class="wrapper">
<header role="banner">
<div class="finish"></div>
<a href"/"><a>
<nav role="navigation">
<ul>
<li>Kunden</li>
<li>Projekte</li>
<li>Leistungen</li>
<li>Agentur</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<aside class="intro testcol">
<h3>Headline 3</h3>
<p>Ferferiandus ma plibus voluptas assi dis peria conectati dus que mi, sundae seque maximod ipsunt ut opta eture sus dit, nos iligentiis rentin res quam dendi officiae quas esequam, volup- tibea sit, simpore pedis eum explani magnatu mquias dolorio cus aut modolectur sequis nullescid ut veni doluptaturem dolorupit estorpo raectatus.</p>
</aside>
<section name="projekte" class="test" role="main">
<hgroup>
<h1>Unsere Projekte</h1>
<h2>Subtitle</h2>
</hgroup>
<ul class="moodlegrid">
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
</ul>
</section>
</div>
Which leads to (sorry due to my status i am not allowed to post images yet - but in this case they are essential so i placed a direct link):
https://dl.dropbox.com/u/8578/sample.png
So a div is wrapping the content of the page. The header is carrying the logo (not shown in the screenshot beneath) and a nav. Then comes an aside element for that grey box floating. Beneath several sections (like register cards) are placed. I've included only one partially in the screenshot. Each register card should cover the screen in its complete width. In between each register card the background image looks through. The background image is placed with #include background-size(cover). As a side note in each register card there should be a bleed on the left and right of about e.g.10% each, so the content is only contained in the center 80%. And the content area of each section contains either matrixes of li (like in the html code above) or columns of 1 to 3 placing divs of content. A few parts of the css i used so far:
$base-font-size: 17px;
$base-line-height: $base-font-size * 1.5;
$total-columns: 20;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
#mixin bleed($padding: $grid-padding, $sides: left right) {
#if $sides == 'all' {
margin: - $padding;
padding: $padding;
}
#else {
#each $side in $sides {
margin-#{$side}: - $padding;
padding-#{$side}: $padding;
}
}
}
* {
#include box-sizing(border-box);
}
body {
background: url('../img/body-bg.jpg') no-repeat center center fixed;
#include background-size(cover);
color:#333;
padding:0;
margin:0;
width: 100%;
font-size: $base-font-size;
font-family: "Signika", Georgia, serif;
#include establish-baseline;
}
.wrapper {
width:100%;
#include container;
#include susy-grid-background;
#include bleed;
}
Within the wrapper at the end the aside as well as sections reside. the basic question are as follows:
a) A general question about best practice first. In the described example would it be enough to place one single container in the wrapper div or would it better to create several containers and would those containers align to each other then if placed throughout the document?
Means either one container for all or one container for the header, one for the aside element and one for each section?
b) Would it be thoughtful to create a container for the aside element. Means one bleed on the left one column content area and one bleed on the right? Or would it be disadvantageous to use an container in that case at all?
c) Looking at the sections is it basically possible at all to let a section fill the whole width of the screen, having on each side a bleed of x columns (placed with pad()? ) and centered in the middle the "content" area splitted into x columns (with span-columns).
d) As seen in the screenshot; at the top of each section there are two arrows pointing at each other. Each arrow consists of a content box containing the text as well as a before and after pseudo class containing a triangle and a rectangle. Latter should stretch till the side of the screen on each side. Would it make sense and be possible to get an responsive css only solution by placing each element within a column:
col1 col2 col3 col4 col5
rectangle content triangle content rectangle
left and right
by assigning a width of 100% each element should fill the full width of the column it is in while be also responsive. And if this idea might work out would it be necessary to create two containers for each section (one for the arrows one for the content with bleeds beneath) or would one be enough?
e) Last question is about the application. If i use :
.moodlegrid li{
#include column-count(3);
#include column-gap(1em);
#include inline-list;
}
it looks like the screenshot from the beginning. If i use the Susy mixins i get the following:
.moodlegrid li{
#include span-columns(4,12);
#include span-columns(4,12);
#include span-columns(4 omega,12);
#include inline-list;
}
and the results look like this:
https://dl.dropbox.com/u/8578/result2.png
Well that's it for now. I am still a bit confused and unsure about best practices as well as if i am doing everything all right so far. ;) Any hints and suggestions would be appreciated. Thanks in advance Ralf
a) I use one container when possible, but multiple containers can be useful (and will align) in certain cases.
b) I don't understand the question. I would simply use squish() to add space to the left and the right.
c) I have not idea what you are asking. Yes, you can have elements span the full screen. You can do it by using multiple containers inside your structural elements (rather than one wrapping them all), or a very large value for bleed. Is that what you mean?
d) I would simply add a large bleed on the left of one, and the right of the other. Then use generated content for the triangles. You don't need your bleed to be responsive to the edge of the screen - you can simply overflow that edge and add overflow-x: hidden; where needed to keep scrollbars from appearing.
e) this code doesn't make any sense. Maybe you wanted this?
.moodlegrid li {
#include span-columns(4,12);
#include nth-omega(3n);
}
Even then, it looks like you may be having issues with float clearing or margin collapsing or something else unrelated.
It would help in the future if you asked each question separately and created specific code examples for each one - rather than lumping them together with one large and complex example. That would also help you debug the problems yourself. Simplify the problem so it is manageable, and then try out the different ideas you have.

Resources