Color the faces of a graph

Question

I want to modify the image (see code below)

enter image description here

by shading in the regions formed by the dashed lines that contain a black dot. The goal is to obtain something like

enter image description here

How can I shade these regions?

Code for image:

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,positioning}
\begin{document}
\tikzstyle{open}   = [draw, black, fill=white, shape=circle]
\tikzstyle{closed} = [draw,        fill,       shape=circle]
\tikzstyle{invisibleVertex} = [shape=circle]
\tikzstyle{invisibleEdge} = [draw opacity=0]
\begin{tikzpicture}[scale=1,transform shape,node distance=2.5cm,>=open triangle 60,semithick]
 \node[closed] (0)              {};
 \node[closed] (1) [right of=0] {};
 \node[closed] (2) [below of=1] {};
 \node[closed] (3) [left  of=2] {};
 \path (0) edge node[open] (m0) {} (1)
       (1) edge node[open] (m1) {} (2)
       (2) edge node[open] (m2) {} (3)
       (3) edge node[open] (m3) {} (0);
 \path (m0) edge[->, densely dashed]                                                                        (m1)
            edge[<-, densely dashed, out=  45, in=  45, looseness=3, overlay] node[invisibleVertex] (e0) {} (m1)
       (m1) edge[->, densely dashed]                                                                        (m2)
            edge[<-, densely dashed, out= -45, in= -45, looseness=3, overlay] node[invisibleVertex] (e1) {} (m2)
       (m2) edge[->, densely dashed]                                                                        (m3)
            edge[<-, densely dashed, out=-135, in=-135, looseness=3, overlay] node[invisibleVertex] (e2) {} (m3)
       (m3) edge[->, densely dashed]                                                                        (m0)
            edge[<-, densely dashed, out= 135, in= 135, looseness=3, overlay] node[invisibleVertex] (e3) {} (m0);
 \node[invisibleVertex, below=0cm of e0] {};
 \node[invisibleVertex, left =0cm of e1] {};
 \node[invisibleVertex, above=0cm of e2] {};
 \node[invisibleVertex, right=0cm of e3] {};
\end{tikzpicture}
\end{document}

This looks like How to Reverse Clip on Custom Path Defined by Ellipse Intersections — Qrrbrbirlbel, Mar 25 '13 at 02:50
It also looks a little like Tikz: joining points on a circle — cmhughes, Mar 25 '13 at 02:59
What have you tried so far? Where do you get stuck? Starting point might be \fill[gray] (m0) to[->,out= 45, in= 45, looseness=3,overlay] (m1). — Qrrbrbirlbel, Mar 25 '13 at 03:02
@Qrrbrbirlbel I have seen many examples using \fill and \clip, but I don't understand how to implement those solutions given that I have curved paths. — Tyson Williams, Mar 25 '13 at 12:24
@TysonWilliams: Sorry if this comes across as harsh, not intended to be, but this site should be seen not just as a way for the person posting the question to accomplish what they need (although that is an important aspect of it), but also as a reference site for someone who comes across a need for a similar type of figure (or issue) and wants to determine out how to accomplish some task. They may be using tikz, or they may not be. — Peter Grill, Mar 25 '13 at 21:52
(cont'd: 2 of 4) So, having alternate solutions is extremely helpful, even though it does not use a single line of your code, which seems to be reason for the down votes, based on your comments.
For instance, had there existed some library for exactly this type of diagram, then that solution would also not use a single line of your code but would solve your problem. Should that answer then not be posted? Or if someone else had earlier posted a similar diagram but used pstricks would it not have been helpful to you if that question also had a tikz solution as well? — Peter Grill, Mar 25 '13 at 21:53
(cont'd: 3 of 4) Down votes should be reserved for things which have nothing to do with the question, or for some reason you think that that solution should not be used. A personal example, I got a down vote for How can I get a big cross to denote a generalized cartesian product?, but I don't know why. It would be helpful to me if the down votes left a comment as to why this is solution should not be used. If there is a hidden problem with that solution I would like to be are of it. BTW, I am not suggesting that the other solutions are not better. — Peter Grill, Mar 25 '13 at 21:54
(cont'd: 4 of 4) To summarize, yes you are free to do what you want, but I am suggesting you consider why you are down voting something, as you'll find that having alternate solutions is often very helpful. — Peter Grill, Mar 25 '13 at 21:54
@PeterGrill Not hash and I completely agree with you. I enjoy when I can find an answer that helps me solve my problem regardless of that OP's question. As to the possibility that some library may be able to do this straight away, I was thinking that Alain Matthes' tkz-graph could be useful (but if it were, I would have expected him to say something). The biggest problem I have with a PSTricks solution is that I don't understand it. (continued) — Tyson Williams, Mar 25 '13 at 22:04
The second problem closely follows, which is that those giving PSTrick solutions have not convinced me that PSTricks is better suited for my problem than TikZ. I suggested that Karl's students could do this but he has yet to accept my offer. Therefore, I will focus on understanding TikZ better and consider only those solutions given in TikZ. — Tyson Williams, Mar 25 '13 at 22:06
@TysonWilliams: I also don't understand pstricks (have not tried either) so have no way of saying it is better or not. And I too focus only on the tikz solutions. — Peter Grill, Mar 25 '13 at 22:19
@TysonWilliams I completely agree with Peter Grill. Let's say that things are not just black and white, especially when it's your own question and the answers people wrote up for you. Maybe they don't work for you, and in that case you are more than welcome not to accept them, and even not to upvote them, but downvoting means there is something inherently wrong with the answer, and just being different from what you expected probably doesn't meet that requirement (at least based on TeX-SX habits and expectations). — ienissei, Mar 25 '13 at 22:38
@ienissei I agree that things are not black and white. For example, the reasons that I choose to downvote something may be different than the reasons that you choose to downvote something. IMO, you have a rather strict view on downvoting. Can you point to somewhere in the TeX-SX FAQ or other official documentation to justify your view? — Tyson Williams, Mar 25 '13 at 23:16
@TysonWilliams Would it be rude to suggest you take a look at the users to vote the most and compare their downvoting rates with yours. My apologies if I somehow said it in a rasher way than the others, but there is a whole Meta thread on this question, where Joseph Wright, one of our moderators and high-rep users states: "Downvoting is in any case a last resort: we've been pretty clear that voting should be a primarily positive thing." (Continued) — ienissei, Mar 26 '13 at 08:48
@TysonWilliams All I am saying is that what may be perfectly normal and fine on another SX site (I see you are very active elsewhere) is not that usual here, and that's why you are getting such a fuss about it… — ienissei, Mar 26 '13 at 08:50
@ienissei I did try to compare my up- and downvote rate to others, but I can't see how many times others have voted. Can you? — Tyson Williams, Mar 26 '13 at 13:18
@ienissei Oh, I found it. It is at the bottom of the summary page. When looking at your own page, there is a special vote page that also contains this info but is not accessible on others profiles. — Tyson Williams, Mar 26 '13 at 13:35

kiss my armpit · Answer 1 · 2013-03-27T00:50:27.560

36

Just for fun with PSTricks.

enter image description here

\documentclass[pstricks,border=12pt]{standalone}
\usepackage{pst-eucl}
\usepackage{multido}

\psset
{
    arrowlength=2,
    PointName=none,
    PointSymbol=none,
    arrowinset=0,
    arrowlength=1,
    linewidth=1pt,
    hatchsep=0.5pt,
    hatchwidth=0.5pt,
    hatchcolor=lightgray,
    dash=3pt 1pt,
}

\pstVerb
{
    /H2S {2 sqrt 2 div} def
}

\def\Atom#1{%
    \pstGeonode(!H2S neg 0){L}(!0 H2S){F}(0,1.5){T}(!H2S 0){R}
    \pscustom[fillstyle=vlines,hatchangle=#1,linestyle=none]{\psellipticarc(R|T){(R)}{(L)}\closepath}
    %
    \psset{nodesep=5.5pt}
    \pcline(L)(F)
    \pcline(R)(F)
    \psset{linestyle=dashed,arrows=->}
    \psellipticarc[arcsep=11pt](0,0)(R|T){(R)}{(L)}
    \pcline(L)(R)
    %
    \psset{linestyle=solid,fillstyle=solid,fillcolor=white}
    \pscircle[fillcolor=black](F){5pt}
    \pscircle(L){5pt}
    \pscircle(R){5pt}
}
\begin{document}
\begin{pspicture}[showgrid=false](-1.5,-1.5)(1.5,1.5)
    \multido{\i=45+90}{4}{\rput{!\i\space 90 sub}(!H2S \i\space PtoC){\Atom{45}}}
\end{pspicture}
\end{document}

How is the diagram constructed?

enter image description here

\documentclass{beamer}
\usepackage{filecontents}
\begin{filecontents*}{myheader.pro}
/H2S 2 sqrt 2 div def
\end{filecontents*}

\usepackage{pst-eucl}
\usepackage[active,tightpage]{preview}
\PreviewEnvironment{pspicture}
\PreviewBorder=12pt
\usepackage{multido}

\pstheader{myheader.pro}

\psset
{
    arrowlength=2,
    PointName=none,
    PointSymbol=none,
    arrowinset=0,
    arrowlength=1,
    linewidth=1pt,
    hatchsep=1pt,
    hatchwidth=1pt,
    hatchcolor=red,
    dash=3pt 1pt,
}



\def\Atom{%
    \pstGeonode(!H2S neg 0){L}(!0 H2S){F}(0,1.5){T}(!H2S 0){R}
    \pscustom[fillstyle=solid,fillcolor=red,linestyle=none]{\psellipticarc(R|T){(R)}{(L)}\closepath}\pause
    %
    \psset{nodesep=5.5pt}
    \pcline(L)(F)
    \pcline(R)(F)\pause
    \psset{linestyle=dashed,arrows=->}
    \psellipticarc[arcsep=11pt](0,0)(R|T){(R)}{(L)}
    \pcline(L)(R)\pause
    %
    \psset{linestyle=solid,fillstyle=solid,fillcolor=white}
    \pscircle[fillcolor=black](F){5pt}
    \pscircle(L){5pt}
    \pscircle(R){5pt}
}

\def\Picture{%
\begin{pspicture}[showgrid=bottom](-2,-2)(2,2)
    \multido{\i=45+90}{4}{\rput{!\i\space 90 sub}(!H2S \i\space PtoC){\Atom}\pause}
\end{pspicture}}

\begin{document}
\begin{frame}
    \Picture
\end{frame}
\end{document}

edited Mar 27 '13 at 00:50

answered Mar 25 '13 at 04:04

kiss my armpit

36,086

1

You didn't use a single line of code from my example that I am interested in. – Tyson Williams Mar 25 '13 at 12:29
10

@TysonWilliams: I think downvoting a different solution is really bad practise: both Karl's students and g-kov just pointed out you how to do the same thing in other manners, which ultimately are answers to your question. Thus I upvoted both. – Claudio Fiandrino Mar 25 '13 at 12:37
You can certainly upvote their answers for whatever reasons you wish just as I may downvote them for whatever reasons I wish. – Tyson Williams Mar 25 '13 at 13:28
It is fine to give a completely different answer that what I am looking for, but you should at least try to convince me why your way is better. For example, you could try to argue that what I was doing can be considered a hack but your solution is elegant. I more than welcome you to update your answer with such an argument. – Tyson Williams Mar 25 '13 at 14:38
8

@TysonWilliams Karl's students gives a fine PSTricks solution to your problem (and not a completely different answer as you say) and I can't see anywhere that you ask for a TikZ solution only. Furthermore, if you don't find his answer useful, then just leave it; don't downvote it. – Svend Tveskæg Mar 25 '13 at 20:56
1

Note: In the animation part, there is an unnecessary frame at the last page of the PDF output. I will not remove it because I am lazy! – kiss my armpit Mar 25 '13 at 21:34
1

@SvendMortensen I am not saying that Karl's student's solution isn't a fine solution. I am merely saying that I requested a solution that was a modification of what I started with and his answer isn't that. I don't know what you do with TikZ, but I use it in large documents so it is highly beneficial to minimize the number of dependencies. I am already using TikZ in many other ways in the document and neither Karl's students nor you have convinced me that I should convert from TikZ to PSTricks because of the issues I face with this particular image. – Tyson Williams Mar 25 '13 at 21:51
@SvendMortensen Since you seen so interested in how and why I vote the way I do, you will probably like to know that I have now upvoted this answer for his beamer/gif animation. – Tyson Williams Mar 25 '13 at 21:53

score 27 · Answer 2 · answered Mar 25 '13 at 10:20

27

Compare Asymptote version: asy -f pdf colored-graph.asy

size(300);
pen lineAb=black+3pt;
pen lineAt=white+1.2pt;
pen lineB=dashed+darkblue+1.3pt;
pen circA=lightyellow;
pen circB=darkblue;
pen rimA=red;
pen rimB=blue;
pen shade=springgreen;
guide circ=unitcircle;
real d=5;
pair a,b,c,u;
a=(0,-d); b=(d,-d);
c=(d,0); u=1.618b;
guide ga=shift(a.x,a.y)*circ;
guide gc=shift(c.x,c.y)*circ;
guide garc=a{dir(-45)}..u..{dir(135)}c;
pair xa=intersectionpoint(ga,c--a);
pair xc=intersectionpoint(gc,a--c);
pair xab=intersectionpoint(ga,a--b);
pair xbc=intersectionpoint(gc,b--c);
pair xau=intersectionpoint(ga,garc);
pair xuc=intersectionpoint(gc,garc);

void base(real phi=0,pen shade=currentpen){
  transform t=rotate(phi);
  fill(t*(a{dir(-45)}..u..{dir(135)}c--cycle),shade);
  draw(t*(xab--b--xbc),lineAb);
  draw(t*(xab--b--xbc),lineAt);
  draw(t*(xc--xa),lineB,Arrow);
  draw(t*(xau{dir(-45)}..u..{dir(135)}xuc),lineB,Arrow); 
  filldraw(t*shift(a.x,a.y)*circ,circA,rimA);
  filldraw(t*shift(b.x,b.y)*circ,circB,rimB);
}

currentpen=orange+opacity(0.5);
base(); base(90,palegreen);
base(180,pink); base(-90,paleyellow);
filldraw(ga,circA,rimA);

enter image description here

answered Mar 25 '13 at 10:20

g.kov

21,864
1
58
95

1

You didn't use a single line of code from my example that I am interested in. – Tyson Williams Mar 25 '13 at 12:29
12

@TysonWilliams An Asymptote solution is a valid graphics solution similar to other TikZ/PSTricks solutions. As you might have seen on the other questions (PSTricks to TikZ or vice versa), it's a great added value to have more than one type of workflow. – percusse Mar 25 '13 at 12:33
"An Asymptote solution is a valid graphics solution similar to other TikZ/PSTricks solutions." In general yes, but not when I ask how to "modify the image (see code below)". – Tyson Williams Mar 25 '13 at 12:37
8

You stated that you want to modify the image, not the code. The answer present a modified version of the image. Please next time beware of your wishes, they might come true. – g.kov Mar 25 '13 at 12:42
Ok, sure. Point taken, but then what is purpose of me providing a MWE if you are going to completely ignore it. – Tyson Williams Mar 25 '13 at 13:22
10

@Tyson Williams: I might be wrong, but MWE is used as a reference point to start from, not for merely finding a missing commas or something, it shows you efforts to achieve the result. The answer however could be completely different. The answer to a question about shading regions on a graph might be useful for someone else, and different approaches just help to choose a suitable for the user. – g.kov Mar 25 '13 at 14:33
Of course your solution might help someone else who views this question, but it is not that helpful to me. If you must know, the reason to only modify my original code is that I have many other pictures created in a similar way and I want them all to look the same. For example, your edges look nothing like mine. Thus, even if you literally interpret my "wish" to modify the image instead of the code, you have already failed by making the edges look different for no apparent reason. In constrast, Alain Matthes's solution changes the arrow tips to triangle 60 but for a good reason. – Tyson Williams Mar 25 '13 at 14:51
10

@TysonWilliams You are free to choose the most helpful answer for you and mark it as accepted. The site is for helping all readers, not just you. – egreg Mar 25 '13 at 23:11
@egreg I agree. I hope that everyone finds the answers to this question as helpful as I have. As for accepting an answer, I would prefer to know that status of this open triangle 60 bug first. Do you know anything about it? – Tyson Williams Mar 25 '13 at 23:19
@TysonWilliams You have the answer in mwibrow's comment about my answer. It's not really a bug but a problem with the conception of the arrow. I think it's fine to use my new arrow : new open triangle 60 – Alain Matthes Mar 26 '13 at 15:56
@AlainMatthes Yes, I plan to use your new open triangle 60. What is the reasoning that the open triangles should behave differently than the closed triangles? – Tyson Williams Mar 26 '13 at 15:59
@TysonWilliams I will update my answer soon with some explanations – Alain Matthes Mar 26 '13 at 17:08

Alain Matthes · Accepted Answer · 2013-03-26T22:18:04.607

It's always complex to do a lot of things at the same time. I searched a trick because there is little bug if I use open triangle 60. The path is not exactly the same. Look at this picture to see the problem (same code as below but with open triangle 60)

enter image description here

Perhaps it's possible to use a simpler way. The problem with edge is we don't get a closed path .

You can compare

\fill (0,0) edge [bend right] (5,0) edge (0,0);

with

\fill (0,0) to [bend right] (5,0) to (0,0);

It's possible to use foreach to write a shorter code.

\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{arrows,positioning,backgrounds}
\begin{document}
\tikzstyle{open}   = [draw, black, fill=white, shape=circle]
\tikzstyle{closed} = [draw,        fill,       shape=circle]
\tikzstyle{invisibleVertex} = [shape=circle]
\tikzstyle{invisibleEdge} = [draw opacity=0]
\begin{tikzpicture}[scale=1,node distance=2.5cm,>=triangle 60,semithick]
 \node[closed] (0)              {};
 \node[closed] (1) [right of=0] {};
 \node[closed] (2) [below of=1] {};
 \node[closed] (3) [left  of=2] {};
 \path (0) edge node[open] (m0) {} (1)
       (1) edge node[open] (m1) {} (2)
       (2) edge node[open] (m2) {} (3)
       (3) edge node[open] (m3) {} (0);


\begin{scope}[on background layer]    
 \fill[fill=green!40]  (m1.45)   to[ out=  45, in=  45,looseness=3]  (m0.45) to (m0.-45) to  (m1.-45) to  (m1.45);
 \fill[fill=green!40]  (m2.-45)  to[ out=  -45, in= -45,looseness=3] (m1.-45) to (m1.45) to  (m2.45) to  (m2.-45);
 \fill[fill=green!40]  (m3.-135) to[ out= -135, in= -135,looseness=3] (m2.-135) to (m2.135) to  (m3.135) to  (m3.-135);
 \fill[fill=green!40]  (m0.-225) to[ out= -225, in= -225,looseness=3] (m3.-225) to (m3.225) to (m0.225) to  (m0.-225);

\end{scope}

 \draw[->,densely dashed]  (m0) to   (m1);
 \draw[densely dashed,->]  (m1.45)   to[ out=  45, in=  45, looseness=3] node[invisibleVertex] (e0) {} (m0.45) ;

 \draw[->,densely dashed]  (m1) to   (m2);
 \draw[densely dashed,->]  (m2.-45)   to[out=  -45, in=  -45, looseness=3 ] node[invisibleVertex] (e1) {} (m1.-45) ;

 \draw[->,densely dashed]  (m2) to   (m3);
 \draw[densely dashed,->]  (m3.-135)   to[ out=  -135, in=  -135, looseness=3] node[invisibleVertex] (e2) {} (m2.-135);                        
 \draw[->,densely dashed]  (m3) to   (m0);
\draw[densely dashed,->]  (m0.-225)   to[ out=  -225, in=  -225, looseness=3] node[invisibleVertex] (e3) {} (m3.-225) ;



 \node[invisibleVertex, below=0cm of e0] {};
 \node[invisibleVertex, left =0cm of e1] {};
 \node[invisibleVertex, above=0cm of e2] {};
 \node[invisibleVertex, right=0cm of e3] {};

\end{tikzpicture}
\end{document}

Without open triangle it's possible to do :

\begin{scope}[on background layer]    
 \fill[fill=green!40]  (m1.45)   to[out=  45, in=  45,looseness=3]   (m0.45)   to (m0.-45) to  (m1.-45) to  (m1.45);
 \fill[fill=green!40]  (m2.-45)  to[out=  -45, in= -45,looseness=3]  (m1.-45)  to (m1.45)  to  (m2.45)  to  (m2.-45);
 \fill[fill=green!40]  (m3.-135) to[out= -135, in= -135,looseness=3] (m2.-135) to (m2.135) to  (m3.135) to  (m3.-135);
 \fill[fill=green!40]  (m0.-225) to[out= -225, in= -225,looseness=3] (m3.-225) to (m3.225) to (m0.225)  to  (m0.-225);
\end{scope}

\path (m0) edge[->, densely dashed]                                                                        (m1)
            edge[<-, densely dashed, out=  45, in=  45, looseness=3, overlay] node[invisibleVertex] (e0) {} (m1)
       (m1) edge[->, densely dashed]                                                                        (m2)
            edge[<-, densely dashed, out= -45, in= -45, looseness=3, overlay] node[invisibleVertex] (e1) {} (m2)
       (m2) edge[->, densely dashed]                                                                        (m3)
            edge[<-, densely dashed, out=-135, in=-135, looseness=3, overlay] node[invisibleVertex] (e2) {} (m3)
       (m3) edge[->, densely dashed]                                                                        (m0)
            edge[<-, densely dashed, out= 135, in= 135, looseness=3, overlay] node[invisibleVertex] (e3) {} (m0);

enter image description here

Update : I defined a new arrow because it' seems that the definition of open triangle' is wrong. I definednew open triangle 60`.

\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{arrows,positioning,backgrounds}
\makeatletter
\pgfarrowsdeclare{new open triangle 60}{new open triangle 60}
{
  \pgfutil@tempdima=0.5pt%
  \advance\pgfutil@tempdima by.25\pgflinewidth%
  \pgfutil@tempdimb=7.29\pgfutil@tempdima\advance\pgfutil@tempdimb by.5\pgflinewidth%
  \pgfarrowsleftextend{+-\pgfutil@tempdimb}
  \pgfutil@tempdimb=.5\pgfutil@tempdima\advance\pgfutil@tempdimb by\pgflinewidth%
  \pgfarrowsrightextend{+\pgfutil@tempdimb}
}
{
  \pgfutil@tempdima=0.5pt%
  \advance\pgfutil@tempdima by.25\pgflinewidth%
  \pgfsetdash{}{+0pt}
  \pgfsetmiterjoin
    \pgfsetfillcolor{white}
  \pgfpathmoveto{\pgfpointadd{\pgfqpoint{0.5\pgfutil@tempdima}{0pt}}{\pgfqpointpolar{150}{9\pgfutil@tempdima}}}
  \pgfpathlineto{\pgfqpoint{0.5\pgfutil@tempdima}{0\pgfutil@tempdima}}
  \pgfpathlineto{\pgfpointadd{\pgfqpoint{0.5\pgfutil@tempdima}{0pt}}{\pgfqpointpolar{-150}{9\pgfutil@tempdima}}}
  \pgfpathclose
  \pgfusepathqfillstroke
}
\makeatother

... etc
\begin{tikzpicture}[scale=1,node distance=2.5cm,>= new open triangle 60,semithick]
... etc.

enter image description here

Update and remark

Finally there are some adverse side effects with the actual solution. For example :

enter image description here

With triangle 60 and new open triangle 60 the tips are misplaced but the lines are correct. Finally with open triangle 60 the tips are well placed but the lines are incorrect.

I don't know if it's easy to modify the definition of the arrows to get correct positions for the tips and the lines.

A possibility like mwibrow wrote it's to use the decoration library. The next code is an adaptation.

enter image description here

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,backgrounds}
\usetikzlibrary{arrows,positioning,backgrounds,decorations.markings}
\begin{document}
\tikzset{background grid/.style={draw=red,step=.5cm},background rectangle/.style={fill=blue!20}}
\makeatletter
\pgfarrowsdeclare{new open triangle 60}{new open triangle 60}
{
  \pgfutil@tempdima=0.5pt%
  \advance\pgfutil@tempdima by.25\pgflinewidth%
  \pgfutil@tempdimb=7.29\pgfutil@tempdima\advance\pgfutil@tempdimb by.5\pgflinewidth%
  \pgfarrowsleftextend{+-\pgfutil@tempdimb}
  \pgfutil@tempdimb=.5\pgfutil@tempdima\advance\pgfutil@tempdimb by\pgflinewidth%
  \pgfarrowsrightextend{+\pgfutil@tempdimb}
}
{
  \pgfutil@tempdima=0.5pt%
  \advance\pgfutil@tempdima by.25\pgflinewidth%
  \pgfsetdash{}{+0pt}
  \pgfsetmiterjoin
  \pgfsetfillcolor{white}% fill the tip 
  \pgfpathmoveto{\pgfpointadd{\pgfqpoint{0.5\pgfutil@tempdima}{0pt}}{\pgfqpointpolar{150}{9\pgfutil@tempdima}}}
  \pgfpathlineto{\pgfqpoint{0.5\pgfutil@tempdima}{0\pgfutil@tempdima}}
  \pgfpathlineto{\pgfpointadd{\pgfqpoint{0.5\pgfutil@tempdima}{0pt}}{\pgfqpointpolar{-150}{9\pgfutil@tempdima}}}
  \pgfpathclose
  \pgfusepathqfillstroke% instead of  \pgfusepathqstroke
}
\makeatother

\begin{tikzpicture}  [  show background rectangle,show background grid]   
  \node [draw,circle](A){A};
  \node [draw,circle](B) at (3,0){B};
  \draw [<->,>=triangle 60,semithick] (A) to [ out=  90, in=  80](B);
  \draw [<->,>=new open triangle 60,semithick] (A) to [ out=  -90, in=  -80](B);
  \draw [orange,semithick] (A) to [ out=  90, in=  80](B);
  \draw [orange,semithick] (A) to [ out=  -90, in=  -80](B);
\end{tikzpicture}
\begin{tikzpicture}  [  show background rectangle,show background grid]   
  \node [draw,circle](A){A};
  \node [draw,circle](B) at (3,0){B};
  \draw [<->,>=triangle 60,semithick] (A) to [ out=  90, in=  80](B);
  \draw [<->,>=open triangle 60,semithick] (A) to [ out=  -90, in=  -80](B);
  \draw [orange,semithick] (A) to [ out=  90, in=  80](B);
  \draw [orange,semithick] (A) to [ out=  -90, in=  -80](B);
\end{tikzpicture}

\tikzstyle{open}   = [draw, black, fill=white, shape=circle]
\tikzstyle{closed} = [draw,        fill,       shape=circle]

\begin{tikzpicture}[scale=1,node distance=2.5cm,>=open triangle 60,semithick]

 \node[closed] (1)  {};
 \node[open] (m1) [below of=1] {};
 \node[open] (m0) [left of=1] {};

\begin{scope}[on background layer]    
 \fill[fill=green!40]  (m1.45)   to[ out=  45, in=  45,looseness=3]  (m0.45) to (m0.-45) to  (m1.-45) to  (m1.45);
\end{scope}

\begin{scope}[decoration={
    markings,% 
    mark=at position 0.999  with {\arrow[red]{new open triangle 60}}}]
         \draw[->,densely dashed]  (m0) to   (m1);
         \draw[densely dashed,postaction={decorate}]  (m1.45)   to[ out=  45, in=  45, looseness=3]  (m0.45) ;
 \end{scope}

\end{tikzpicture}
\end{document}

I don't mind changing the arrow tips to triangle 60 to make this simpler. — Tyson Williams, Mar 25 '13 at 12:30
Why does using open triangle 60 instead of triangle 60 cause a small gap to appear between the shaded region and the dashed edge? — Tyson Williams, Mar 25 '13 at 15:01
@TysonWilliams See my update : It's probably a bug in the definition of the arrow. — Alain Matthes, Mar 25 '13 at 16:36
@TysonWilliams Perhaps you need to ask a new question about arrow because I don't know the mechanism used to build an arrow and I'm not a tex expert. I think when you used triangle 60, the tip is placed on the line and with open triangle, perhaps the end of the line is modified... I don't know. I agree with mwibrow about " Decorations is a bit more flexible if repositioning was required.". With a mark, you avoid this problem. — Alain Matthes, Mar 25 '13 at 18:02
@AlainMatthes: not completely sure, but perhaps with the new arrow library by Luigi (more details on SourceForge) this won't be a problem anymore. — Claudio Fiandrino, Mar 25 '13 at 18:21
@AlainMatthes: you're right. I've just tested all open new arrows and indeed the problem persist. — Claudio Fiandrino, Mar 25 '13 at 19:52
PGF shortens lines according to the arrow tip code (see the manual). With open arrow tips this shortening is quite a lot so that the line does not show behind the arrow head. With curves I think this shortening takes place parallel to the nearest control point and end point of the curve (this isn't in the manual). The end point is moved but no adjustment is made to the nearest control point to maintain the curve (the maths is tricky). Decorations sort-of do the maths right (but at some computational cost). Alain Matthes' solution is not only nice, but the simplest solution in this case. — Mark Wibrow, Mar 26 '13 at 14:00
The behaviour is well explained by @mwibrow. I'd like to point out that even the "closed" triangle arrows show the same issue, but because of the small size of the arrow head it is hidden somehow. In the unofficial arrows.new library all the triangle arrows have the same behaviour of the open versions, so it's worse. — Luigi, Mar 26 '13 at 19:27
@AlainMatthes, you could combine two different opacities for the shaft and the arrow head along with clipping the path to get the empty arrow tip, but it could be a nightmare! In detail, you should first draw the arrow with a transparent line and an opaque head (marking), then clip the path excluding the tip and redraw the line. — Luigi, Mar 27 '13 at 10:26

Mark Wibrow · Answer 4 · 2013-03-25T15:57:53.797

18

Just to back up Alain Matthes' point about \foreach, here's another version. Although the nodes are not named (minus points here, but it could be automated), and the setting up of styles/parameters is quite lengthy, the actual drawing part is relatively short. Decorations were used instead of arrows, which is slight overkill, but is a bit more flexible if repositioning was required.

\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{arrows}
\usetikzlibrary{decorations.markings}


\def\r{1cm}
\def\a{3pt}

\tikzset{
    dot/.style={
        insert path={
            node [circle, draw, fill=#1, inner sep=2pt] {}
        }
    },
    arrow edge/.style={
        dashed,
        draw,
        postaction={
            decoration={
                markings, 
                mark=at position #1 with {
                    \draw [solid, black, fill=white, xshift=-\a] 
                    (0:\a) -- (120:\a) -- (240:\a) -- cycle;
                }
            },
            decorate
        }
    },
    square/.style={
        solid,
        draw,
        thick
    }
}

\begin{document}

\begin{tikzpicture}

\foreach \i in {0, 90, 180, 270}{
    \path [fill=gray!25, arrow edge=-\a] 
        (\i:\r) [rotate=\i-45] arc (0:180:\r/sqrt 2 and \r*sqrt 2);
    \path [arrow edge=-\a]  
        (\i+90:\r) -- (\i:\r);
}

\path [square] 
    (-\r,-\r) rectangle (\r, \r);

\foreach \i in {0, 90, 180, 270}
    \path  
        (\i:\r) [dot=white] 
        (\i+45:\r*sqrt 2) [dot=black];

\end{tikzpicture}
\end{document}

shadearea

edited Mar 25 '13 at 15:57

answered Mar 25 '13 at 12:30

Mark Wibrow

70,437

1

Actually, I usually prefer not to use \foreach. I think it makes the code unreadable. Can you implement your solution without using \foreach? – Tyson Williams Mar 25 '13 at 12:34
Fine solution! Very interesting way. – Alain Matthes Mar 25 '13 at 12:42
3

@TysonWilliams: Using \foreach is better solution because it applies the so-called DRY (Don't Repeat Yourself) programming paradigm to your problem while it still keeps the code readable and clean. – kiss my armpit Mar 25 '13 at 12:43
@Karl'sstudents As I already said, I disagree. I don't think the \foreach functionality in TikZ very readable. Worse yet, I am not the only one that will use this code and the others that will know and understand TikZ considerably less than me. Of course I believe in the DRY paradigm. If were willing to specify these paths twice, I am sure that I could figure out how to first get the graph to look correct (which I have already done) and then repeat the paths just to be able to fill. However, I am quite unwilling to settle for this solution. – Tyson Williams Mar 25 '13 at 14:43
@TysonWilliams: as someone who regularly has to plough through other people's unreadable code, I am sympathetic to your position. I also concede the approach given may not generalise very well. However, the point of the answer was specifically to show how \foreach can reduce the amount of coding for this image. – Mark Wibrow Mar 25 '13 at 16:07
But your solution is more than just Alain Matthes's solution modified to use \foreach and I am trying to figure out what exactly those differences are. – Tyson Williams Mar 25 '13 at 16:32

Color the faces of a graph

4 Answers4

How is the diagram constructed?

Linked