shading area between nodes











up vote
3
down vote

favorite












I have drawn a graph with three vertices and want to shade the area between the edges following the edges 1 to 3 to 2 to 1. (code below)



enter image description here



The first problem I get is with the curve (in red). Before the curve no problems, the second segment starts in 3 at a different point along the edge of 3. After the curve however in 2 the third segment starts at the position the second segment arrived.



This I could patch by adding a extra position. Still the shading is not at the right position.



documentclass{standalone}
usepackage{tikz}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzstyle{knop}=[circle,minimum size=14,inner sep=0pt,draw]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3)
to [out=225,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
%- paint over to get the nodes right
%node[knop,fill=white] (p1) at (0,1.2) {$1$} ;
%node[knop,fill=white] (p2) at (-1.2,0) {$2$} ;
%node[knop,fill=white] (p3) at (1.2,0) {$3$} ;
end{tikzpicture}

end{document}









share|improve this question






















  • Yes, the red line continues at same position, this is how the path works. Of course, you could do, say, path (p1) to (p3) (p2) to (p1); to have two separate paths.
    – marmot
    2 days ago










  • Indeed, as separate path's there was not problem. For the fill I needed a single path, and was very surprised that node 3 gave different results from node 2.
    – Hendrik Jan
    2 days ago










  • I added more explanations to my answer. My previous comment was not entirely correct, I confused beginning with end. I do not think it is absolutely obvious why that happens, but there are at least to ways to fix it.
    – marmot
    2 days ago















up vote
3
down vote

favorite












I have drawn a graph with three vertices and want to shade the area between the edges following the edges 1 to 3 to 2 to 1. (code below)



enter image description here



The first problem I get is with the curve (in red). Before the curve no problems, the second segment starts in 3 at a different point along the edge of 3. After the curve however in 2 the third segment starts at the position the second segment arrived.



This I could patch by adding a extra position. Still the shading is not at the right position.



documentclass{standalone}
usepackage{tikz}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzstyle{knop}=[circle,minimum size=14,inner sep=0pt,draw]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3)
to [out=225,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
%- paint over to get the nodes right
%node[knop,fill=white] (p1) at (0,1.2) {$1$} ;
%node[knop,fill=white] (p2) at (-1.2,0) {$2$} ;
%node[knop,fill=white] (p3) at (1.2,0) {$3$} ;
end{tikzpicture}

end{document}









share|improve this question






















  • Yes, the red line continues at same position, this is how the path works. Of course, you could do, say, path (p1) to (p3) (p2) to (p1); to have two separate paths.
    – marmot
    2 days ago










  • Indeed, as separate path's there was not problem. For the fill I needed a single path, and was very surprised that node 3 gave different results from node 2.
    – Hendrik Jan
    2 days ago










  • I added more explanations to my answer. My previous comment was not entirely correct, I confused beginning with end. I do not think it is absolutely obvious why that happens, but there are at least to ways to fix it.
    – marmot
    2 days ago













up vote
3
down vote

favorite









up vote
3
down vote

favorite











I have drawn a graph with three vertices and want to shade the area between the edges following the edges 1 to 3 to 2 to 1. (code below)



enter image description here



The first problem I get is with the curve (in red). Before the curve no problems, the second segment starts in 3 at a different point along the edge of 3. After the curve however in 2 the third segment starts at the position the second segment arrived.



This I could patch by adding a extra position. Still the shading is not at the right position.



documentclass{standalone}
usepackage{tikz}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzstyle{knop}=[circle,minimum size=14,inner sep=0pt,draw]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3)
to [out=225,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
%- paint over to get the nodes right
%node[knop,fill=white] (p1) at (0,1.2) {$1$} ;
%node[knop,fill=white] (p2) at (-1.2,0) {$2$} ;
%node[knop,fill=white] (p3) at (1.2,0) {$3$} ;
end{tikzpicture}

end{document}









share|improve this question













I have drawn a graph with three vertices and want to shade the area between the edges following the edges 1 to 3 to 2 to 1. (code below)



enter image description here



The first problem I get is with the curve (in red). Before the curve no problems, the second segment starts in 3 at a different point along the edge of 3. After the curve however in 2 the third segment starts at the position the second segment arrived.



This I could patch by adding a extra position. Still the shading is not at the right position.



documentclass{standalone}
usepackage{tikz}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzstyle{knop}=[circle,minimum size=14,inner sep=0pt,draw]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3)
to [out=225,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
%- paint over to get the nodes right
%node[knop,fill=white] (p1) at (0,1.2) {$1$} ;
%node[knop,fill=white] (p2) at (-1.2,0) {$2$} ;
%node[knop,fill=white] (p3) at (1.2,0) {$3$} ;
end{tikzpicture}

end{document}






tikz-pgf






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 2 days ago









Hendrik Jan

1304




1304












  • Yes, the red line continues at same position, this is how the path works. Of course, you could do, say, path (p1) to (p3) (p2) to (p1); to have two separate paths.
    – marmot
    2 days ago










  • Indeed, as separate path's there was not problem. For the fill I needed a single path, and was very surprised that node 3 gave different results from node 2.
    – Hendrik Jan
    2 days ago










  • I added more explanations to my answer. My previous comment was not entirely correct, I confused beginning with end. I do not think it is absolutely obvious why that happens, but there are at least to ways to fix it.
    – marmot
    2 days ago


















  • Yes, the red line continues at same position, this is how the path works. Of course, you could do, say, path (p1) to (p3) (p2) to (p1); to have two separate paths.
    – marmot
    2 days ago










  • Indeed, as separate path's there was not problem. For the fill I needed a single path, and was very surprised that node 3 gave different results from node 2.
    – Hendrik Jan
    2 days ago










  • I added more explanations to my answer. My previous comment was not entirely correct, I confused beginning with end. I do not think it is absolutely obvious why that happens, but there are at least to ways to fix it.
    – marmot
    2 days ago
















Yes, the red line continues at same position, this is how the path works. Of course, you could do, say, path (p1) to (p3) (p2) to (p1); to have two separate paths.
– marmot
2 days ago




Yes, the red line continues at same position, this is how the path works. Of course, you could do, say, path (p1) to (p3) (p2) to (p1); to have two separate paths.
– marmot
2 days ago












Indeed, as separate path's there was not problem. For the fill I needed a single path, and was very surprised that node 3 gave different results from node 2.
– Hendrik Jan
2 days ago




Indeed, as separate path's there was not problem. For the fill I needed a single path, and was very surprised that node 3 gave different results from node 2.
– Hendrik Jan
2 days ago












I added more explanations to my answer. My previous comment was not entirely correct, I confused beginning with end. I do not think it is absolutely obvious why that happens, but there are at least to ways to fix it.
– marmot
2 days ago




I added more explanations to my answer. My previous comment was not entirely correct, I confused beginning with end. I do not think it is absolutely obvious why that happens, but there are at least to ways to fix it.
– marmot
2 days ago










1 Answer
1






active

oldest

votes

















up vote
3
down vote



accepted










Note: in order to shade an area, you need a continuous path. If you have gaps in your path, then TikZ will only shade the last stretch. This happens in your path



path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3) 
to [out=225,in=-45] (p2) to (p2.north east) to (p1);


Even though this does not seem immediately in ones eye, you effectively do that here since the to operation together with an extended node will draw the path to the pgfpointshapeborder, see p. 1031 of the pgfmanual. That's why I draw the path in the above between explicit anchors, and use the backgrounds library in order not to wipe out parts of the nodes.



This is illustrated in the MWE



documentclass[tikz,border=3.14mm]{standalone}
begin{document}
begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw},
explain/.style={font=sffamily,text width=2cm,anchor=north,anchor=north}}
begin{scope}[local bounding box=TL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p2.north east) to (p2)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TL.south) {your proposal};
begin{scope}[xshift=4cm,local bounding box=TR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TR.south) {the problem is symmetric};
%
begin{scope}[yshift=-5cm]
begin{scope}[local bounding box=BL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south west) to (p2.north east) to (p2.-45)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BL.south) {anchor inserted};
begin{scope}[xshift=4cm,local bounding box=BR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3.-135)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BR.south) {anchor inserted};
end{scope}
end{tikzpicture}
end{document}


enter image description here



This shows that the problem is symmetric, as one could have expected. It also shows that you have effectively a gap in your path, but I agree that it is not obvious that you have one rather than two gaps. Somehow TikZ skips over the first gap but not over the second one. Why that is, I don't know.



The MWE also shows how to fix this: add one additional anchor to the path, such that there is no gap.



However, I am wondering if you really want to wipe out parts of the nodes, or in fact attempt to draw something like the following.



documentclass{standalone}
usepackage{tikz}
usetikzlibrary{backgrounds}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw,fill=white}}
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
begin{scope}[on background layer]
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
path [fill=lightgray,draw=red,very thin] (p1.center) to (p3.center)
to [out=225,in=-45] (p2.center) to (p1.center);
end{scope}
end{tikzpicture}
end{document}


enter image description here






share|improve this answer























  • Thanks! The backgrounds library is of course a tool I completely missed!
    – Hendrik Jan
    2 days ago






  • 1




    +1 A very good explanation can be found on p 245, I quote: However, for most other shapes, some path construction operations like -- try to be “clever” when they are asked to draw a line from such a coordinate or to such a coordinate. When you say (x)--(1,1), the -- path operation will not draw a line from the center of x, but from the border of x in the direction going towards (1,1). Likewise, (1,1)--(x) will also have the line end on the border in the direction coming from (1,1). The TikZ manual is a real maquis!
    – AndréC
    2 days ago






  • 1




    @AndréC Thanks! However, this is the "easy" part. In these paths there are two occurrences of this, which seem to get treated differently.
    – marmot
    2 days ago










  • No, they are treated the same way, at least it seems to me.
    – AndréC
    2 days ago










  • @AndréC Well, could you please compare the blue contour and the shaded area? Just look at the upper both pictures. There is always one (rather than two) mismatch, and it is always at the first node.
    – marmot
    2 days ago











Your Answer








StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "85"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2ftex.stackexchange.com%2fquestions%2f460604%2fshading-area-between-nodes%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
3
down vote



accepted










Note: in order to shade an area, you need a continuous path. If you have gaps in your path, then TikZ will only shade the last stretch. This happens in your path



path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3) 
to [out=225,in=-45] (p2) to (p2.north east) to (p1);


Even though this does not seem immediately in ones eye, you effectively do that here since the to operation together with an extended node will draw the path to the pgfpointshapeborder, see p. 1031 of the pgfmanual. That's why I draw the path in the above between explicit anchors, and use the backgrounds library in order not to wipe out parts of the nodes.



This is illustrated in the MWE



documentclass[tikz,border=3.14mm]{standalone}
begin{document}
begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw},
explain/.style={font=sffamily,text width=2cm,anchor=north,anchor=north}}
begin{scope}[local bounding box=TL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p2.north east) to (p2)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TL.south) {your proposal};
begin{scope}[xshift=4cm,local bounding box=TR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TR.south) {the problem is symmetric};
%
begin{scope}[yshift=-5cm]
begin{scope}[local bounding box=BL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south west) to (p2.north east) to (p2.-45)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BL.south) {anchor inserted};
begin{scope}[xshift=4cm,local bounding box=BR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3.-135)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BR.south) {anchor inserted};
end{scope}
end{tikzpicture}
end{document}


enter image description here



This shows that the problem is symmetric, as one could have expected. It also shows that you have effectively a gap in your path, but I agree that it is not obvious that you have one rather than two gaps. Somehow TikZ skips over the first gap but not over the second one. Why that is, I don't know.



The MWE also shows how to fix this: add one additional anchor to the path, such that there is no gap.



However, I am wondering if you really want to wipe out parts of the nodes, or in fact attempt to draw something like the following.



documentclass{standalone}
usepackage{tikz}
usetikzlibrary{backgrounds}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw,fill=white}}
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
begin{scope}[on background layer]
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
path [fill=lightgray,draw=red,very thin] (p1.center) to (p3.center)
to [out=225,in=-45] (p2.center) to (p1.center);
end{scope}
end{tikzpicture}
end{document}


enter image description here






share|improve this answer























  • Thanks! The backgrounds library is of course a tool I completely missed!
    – Hendrik Jan
    2 days ago






  • 1




    +1 A very good explanation can be found on p 245, I quote: However, for most other shapes, some path construction operations like -- try to be “clever” when they are asked to draw a line from such a coordinate or to such a coordinate. When you say (x)--(1,1), the -- path operation will not draw a line from the center of x, but from the border of x in the direction going towards (1,1). Likewise, (1,1)--(x) will also have the line end on the border in the direction coming from (1,1). The TikZ manual is a real maquis!
    – AndréC
    2 days ago






  • 1




    @AndréC Thanks! However, this is the "easy" part. In these paths there are two occurrences of this, which seem to get treated differently.
    – marmot
    2 days ago










  • No, they are treated the same way, at least it seems to me.
    – AndréC
    2 days ago










  • @AndréC Well, could you please compare the blue contour and the shaded area? Just look at the upper both pictures. There is always one (rather than two) mismatch, and it is always at the first node.
    – marmot
    2 days ago















up vote
3
down vote



accepted










Note: in order to shade an area, you need a continuous path. If you have gaps in your path, then TikZ will only shade the last stretch. This happens in your path



path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3) 
to [out=225,in=-45] (p2) to (p2.north east) to (p1);


Even though this does not seem immediately in ones eye, you effectively do that here since the to operation together with an extended node will draw the path to the pgfpointshapeborder, see p. 1031 of the pgfmanual. That's why I draw the path in the above between explicit anchors, and use the backgrounds library in order not to wipe out parts of the nodes.



This is illustrated in the MWE



documentclass[tikz,border=3.14mm]{standalone}
begin{document}
begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw},
explain/.style={font=sffamily,text width=2cm,anchor=north,anchor=north}}
begin{scope}[local bounding box=TL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p2.north east) to (p2)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TL.south) {your proposal};
begin{scope}[xshift=4cm,local bounding box=TR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TR.south) {the problem is symmetric};
%
begin{scope}[yshift=-5cm]
begin{scope}[local bounding box=BL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south west) to (p2.north east) to (p2.-45)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BL.south) {anchor inserted};
begin{scope}[xshift=4cm,local bounding box=BR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3.-135)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BR.south) {anchor inserted};
end{scope}
end{tikzpicture}
end{document}


enter image description here



This shows that the problem is symmetric, as one could have expected. It also shows that you have effectively a gap in your path, but I agree that it is not obvious that you have one rather than two gaps. Somehow TikZ skips over the first gap but not over the second one. Why that is, I don't know.



The MWE also shows how to fix this: add one additional anchor to the path, such that there is no gap.



However, I am wondering if you really want to wipe out parts of the nodes, or in fact attempt to draw something like the following.



documentclass{standalone}
usepackage{tikz}
usetikzlibrary{backgrounds}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw,fill=white}}
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
begin{scope}[on background layer]
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
path [fill=lightgray,draw=red,very thin] (p1.center) to (p3.center)
to [out=225,in=-45] (p2.center) to (p1.center);
end{scope}
end{tikzpicture}
end{document}


enter image description here






share|improve this answer























  • Thanks! The backgrounds library is of course a tool I completely missed!
    – Hendrik Jan
    2 days ago






  • 1




    +1 A very good explanation can be found on p 245, I quote: However, for most other shapes, some path construction operations like -- try to be “clever” when they are asked to draw a line from such a coordinate or to such a coordinate. When you say (x)--(1,1), the -- path operation will not draw a line from the center of x, but from the border of x in the direction going towards (1,1). Likewise, (1,1)--(x) will also have the line end on the border in the direction coming from (1,1). The TikZ manual is a real maquis!
    – AndréC
    2 days ago






  • 1




    @AndréC Thanks! However, this is the "easy" part. In these paths there are two occurrences of this, which seem to get treated differently.
    – marmot
    2 days ago










  • No, they are treated the same way, at least it seems to me.
    – AndréC
    2 days ago










  • @AndréC Well, could you please compare the blue contour and the shaded area? Just look at the upper both pictures. There is always one (rather than two) mismatch, and it is always at the first node.
    – marmot
    2 days ago













up vote
3
down vote



accepted







up vote
3
down vote



accepted






Note: in order to shade an area, you need a continuous path. If you have gaps in your path, then TikZ will only shade the last stretch. This happens in your path



path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3) 
to [out=225,in=-45] (p2) to (p2.north east) to (p1);


Even though this does not seem immediately in ones eye, you effectively do that here since the to operation together with an extended node will draw the path to the pgfpointshapeborder, see p. 1031 of the pgfmanual. That's why I draw the path in the above between explicit anchors, and use the backgrounds library in order not to wipe out parts of the nodes.



This is illustrated in the MWE



documentclass[tikz,border=3.14mm]{standalone}
begin{document}
begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw},
explain/.style={font=sffamily,text width=2cm,anchor=north,anchor=north}}
begin{scope}[local bounding box=TL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p2.north east) to (p2)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TL.south) {your proposal};
begin{scope}[xshift=4cm,local bounding box=TR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TR.south) {the problem is symmetric};
%
begin{scope}[yshift=-5cm]
begin{scope}[local bounding box=BL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south west) to (p2.north east) to (p2.-45)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BL.south) {anchor inserted};
begin{scope}[xshift=4cm,local bounding box=BR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3.-135)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BR.south) {anchor inserted};
end{scope}
end{tikzpicture}
end{document}


enter image description here



This shows that the problem is symmetric, as one could have expected. It also shows that you have effectively a gap in your path, but I agree that it is not obvious that you have one rather than two gaps. Somehow TikZ skips over the first gap but not over the second one. Why that is, I don't know.



The MWE also shows how to fix this: add one additional anchor to the path, such that there is no gap.



However, I am wondering if you really want to wipe out parts of the nodes, or in fact attempt to draw something like the following.



documentclass{standalone}
usepackage{tikz}
usetikzlibrary{backgrounds}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw,fill=white}}
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
begin{scope}[on background layer]
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
path [fill=lightgray,draw=red,very thin] (p1.center) to (p3.center)
to [out=225,in=-45] (p2.center) to (p1.center);
end{scope}
end{tikzpicture}
end{document}


enter image description here






share|improve this answer














Note: in order to shade an area, you need a continuous path. If you have gaps in your path, then TikZ will only shade the last stretch. This happens in your path



path [fill=lightgray,draw] (p1.south east) to (p3.north west) to (p3) 
to [out=225,in=-45] (p2) to (p2.north east) to (p1);


Even though this does not seem immediately in ones eye, you effectively do that here since the to operation together with an extended node will draw the path to the pgfpointshapeborder, see p. 1031 of the pgfmanual. That's why I draw the path in the above between explicit anchors, and use the backgrounds library in order not to wipe out parts of the nodes.



This is illustrated in the MWE



documentclass[tikz,border=3.14mm]{standalone}
begin{document}
begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw},
explain/.style={font=sffamily,text width=2cm,anchor=north,anchor=north}}
begin{scope}[local bounding box=TL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p2.north east) to (p2)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TL.south) {your proposal};
begin{scope}[xshift=4cm,local bounding box=TR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (TR.south) {the problem is symmetric};
%
begin{scope}[yshift=-5cm]
begin{scope}[local bounding box=BL]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south west) to (p2.north east) to (p2.-45)
to [out=-45,in=225] (p3) to (p3.north west) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BL.south) {anchor inserted};
begin{scope}[xshift=4cm,local bounding box=BR]
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
%- part shaded area missing
path [fill=lightgray,draw=blue] (p1.south east) to (p3.north west) to (p3.-135)
to[out=-135,in=-45] (p2) to (p2.north east) to (p1);
%- red line continues at same position?
path [draw=red,very thin] (p1) to (p3) to [out=225,in=-45] (p2) to (p1);
end{scope}
node[explain] at (BR.south) {anchor inserted};
end{scope}
end{tikzpicture}
end{document}


enter image description here



This shows that the problem is symmetric, as one could have expected. It also shows that you have effectively a gap in your path, but I agree that it is not obvious that you have one rather than two gaps. Somehow TikZ skips over the first gap but not over the second one. Why that is, I don't know.



The MWE also shows how to fix this: add one additional anchor to the path, such that there is no gap.



However, I am wondering if you really want to wipe out parts of the nodes, or in fact attempt to draw something like the following.



documentclass{standalone}
usepackage{tikz}
usetikzlibrary{backgrounds}
begin{document}

begin{tikzpicture}[scale=0.6]
tikzset{knop/.style={circle,minimum size=14,inner sep=0pt,draw,fill=white}}
node[knop] (p1) at (0,1.2) {$1$} ;
node[knop] (p2) at (-1.2,0) {$2$} ;
node[knop] (p3) at (1.2,0) {$3$} ;
begin{scope}[on background layer]
%- loop is not a problem
path [fill=lightgray,draw,looseness=6,loop] (p1) to [out=45,in=135] (p1);
path [fill=lightgray,draw=red,very thin] (p1.center) to (p3.center)
to [out=225,in=-45] (p2.center) to (p1.center);
end{scope}
end{tikzpicture}
end{document}


enter image description here







share|improve this answer














share|improve this answer



share|improve this answer








edited 2 days ago

























answered 2 days ago









marmot

76.6k487161




76.6k487161












  • Thanks! The backgrounds library is of course a tool I completely missed!
    – Hendrik Jan
    2 days ago






  • 1




    +1 A very good explanation can be found on p 245, I quote: However, for most other shapes, some path construction operations like -- try to be “clever” when they are asked to draw a line from such a coordinate or to such a coordinate. When you say (x)--(1,1), the -- path operation will not draw a line from the center of x, but from the border of x in the direction going towards (1,1). Likewise, (1,1)--(x) will also have the line end on the border in the direction coming from (1,1). The TikZ manual is a real maquis!
    – AndréC
    2 days ago






  • 1




    @AndréC Thanks! However, this is the "easy" part. In these paths there are two occurrences of this, which seem to get treated differently.
    – marmot
    2 days ago










  • No, they are treated the same way, at least it seems to me.
    – AndréC
    2 days ago










  • @AndréC Well, could you please compare the blue contour and the shaded area? Just look at the upper both pictures. There is always one (rather than two) mismatch, and it is always at the first node.
    – marmot
    2 days ago


















  • Thanks! The backgrounds library is of course a tool I completely missed!
    – Hendrik Jan
    2 days ago






  • 1




    +1 A very good explanation can be found on p 245, I quote: However, for most other shapes, some path construction operations like -- try to be “clever” when they are asked to draw a line from such a coordinate or to such a coordinate. When you say (x)--(1,1), the -- path operation will not draw a line from the center of x, but from the border of x in the direction going towards (1,1). Likewise, (1,1)--(x) will also have the line end on the border in the direction coming from (1,1). The TikZ manual is a real maquis!
    – AndréC
    2 days ago






  • 1




    @AndréC Thanks! However, this is the "easy" part. In these paths there are two occurrences of this, which seem to get treated differently.
    – marmot
    2 days ago










  • No, they are treated the same way, at least it seems to me.
    – AndréC
    2 days ago










  • @AndréC Well, could you please compare the blue contour and the shaded area? Just look at the upper both pictures. There is always one (rather than two) mismatch, and it is always at the first node.
    – marmot
    2 days ago
















Thanks! The backgrounds library is of course a tool I completely missed!
– Hendrik Jan
2 days ago




Thanks! The backgrounds library is of course a tool I completely missed!
– Hendrik Jan
2 days ago




1




1




+1 A very good explanation can be found on p 245, I quote: However, for most other shapes, some path construction operations like -- try to be “clever” when they are asked to draw a line from such a coordinate or to such a coordinate. When you say (x)--(1,1), the -- path operation will not draw a line from the center of x, but from the border of x in the direction going towards (1,1). Likewise, (1,1)--(x) will also have the line end on the border in the direction coming from (1,1). The TikZ manual is a real maquis!
– AndréC
2 days ago




+1 A very good explanation can be found on p 245, I quote: However, for most other shapes, some path construction operations like -- try to be “clever” when they are asked to draw a line from such a coordinate or to such a coordinate. When you say (x)--(1,1), the -- path operation will not draw a line from the center of x, but from the border of x in the direction going towards (1,1). Likewise, (1,1)--(x) will also have the line end on the border in the direction coming from (1,1). The TikZ manual is a real maquis!
– AndréC
2 days ago




1




1




@AndréC Thanks! However, this is the "easy" part. In these paths there are two occurrences of this, which seem to get treated differently.
– marmot
2 days ago




@AndréC Thanks! However, this is the "easy" part. In these paths there are two occurrences of this, which seem to get treated differently.
– marmot
2 days ago












No, they are treated the same way, at least it seems to me.
– AndréC
2 days ago




No, they are treated the same way, at least it seems to me.
– AndréC
2 days ago












@AndréC Well, could you please compare the blue contour and the shaded area? Just look at the upper both pictures. There is always one (rather than two) mismatch, and it is always at the first node.
– marmot
2 days ago




@AndréC Well, could you please compare the blue contour and the shaded area? Just look at the upper both pictures. There is always one (rather than two) mismatch, and it is always at the first node.
– marmot
2 days ago


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2ftex.stackexchange.com%2fquestions%2f460604%2fshading-area-between-nodes%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

"Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

Alcedinidae

RAC Tourist Trophy