Svg Spray chart
-1
Actually I am new to SVG. I need's to draw baseball spray chart as have in below.Please help how to get this exactly and each section dynamically varies.Is it possible to draw using HTML CSS.Thanks.
UPDATE
I'm updating the question with the OP's comments that are important:
I forget to tell you it is a baseball ground. Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
html css3 svg
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
asked Nov 15 '18 at 9:20
user8646340user8646340
357
add a comment |
-1
Actually I am new to SVG. I need's to draw baseball spray chart as have in below.Please help how to get this exactly and each section dynamically varies.Is it possible to draw using HTML CSS.Thanks.
UPDATE
I'm updating the question with the OP's comments that are important:
I forget to tell you it is a baseball ground. Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
html css3 svg
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
asked Nov 15 '18 at 9:20
user8646340user8646340
357
I understand that the data can vary. Can you add an example of how your data (an object - I suppose) looks like?
– enxaneta
Nov 15 '18 at 9:28
@enxaneta It seems array(3,3,29,13,11,18,23);
– user8646340
Nov 15 '18 at 9:32
I suppose you decide the the color on base of the value. How do you decide the size of the pie element 3+3+29+13 = 48; 11+18+23= 52;
– enxaneta
Nov 15 '18 at 9:39
@enxaneta I forget to tell you it is a baseball ground.Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
– user8646340
Nov 15 '18 at 10:25
Please update your question with what you tried, what you researched and what specific programming question you have about your current task. Do note Stack Overflow is not a free coding service, but a place where you can get answers or insight about your code.
– Andrei Gheorghiu
Nov 15 '18 at 11:18
add a comment |
-1
-1
-1
Actually I am new to SVG. I need's to draw baseball spray chart as have in below.Please help how to get this exactly and each section dynamically varies.Is it possible to draw using HTML CSS.Thanks.
UPDATE
I'm updating the question with the OP's comments that are important:
I forget to tell you it is a baseball ground. Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
html css3 svg
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
asked Nov 15 '18 at 9:20
user8646340user8646340
357
Actually I am new to SVG. I need's to draw baseball spray chart as have in below.Please help how to get this exactly and each section dynamically varies.Is it possible to draw using HTML CSS.Thanks.
UPDATE
I'm updating the question with the OP's comments that are important:
I forget to tell you it is a baseball ground. Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
html css3 svg
html css3 svg
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
asked Nov 15 '18 at 9:20
user8646340user8646340
357
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
asked Nov 15 '18 at 9:20
user8646340user8646340
357
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
edited Nov 15 '18 at 13:00
enxaneta
8,3322518
8,3322518
asked Nov 15 '18 at 9:20
user8646340user8646340
357
asked Nov 15 '18 at 9:20
user8646340user8646340
357
asked Nov 15 '18 at 9:20
user8646340user8646340
357
357
I understand that the data can vary. Can you add an example of how your data (an object - I suppose) looks like?
– enxaneta
Nov 15 '18 at 9:28
@enxaneta It seems array(3,3,29,13,11,18,23);
– user8646340
Nov 15 '18 at 9:32
I suppose you decide the the color on base of the value. How do you decide the size of the pie element 3+3+29+13 = 48; 11+18+23= 52;
– enxaneta
Nov 15 '18 at 9:39
@enxaneta I forget to tell you it is a baseball ground.Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
– user8646340
Nov 15 '18 at 10:25
Please update your question with what you tried, what you researched and what specific programming question you have about your current task. Do note Stack Overflow is not a free coding service, but a place where you can get answers or insight about your code.
– Andrei Gheorghiu
Nov 15 '18 at 11:18
add a comment |
I understand that the data can vary. Can you add an example of how your data (an object - I suppose) looks like?
– enxaneta
Nov 15 '18 at 9:28
@enxaneta It seems array(3,3,29,13,11,18,23);
– user8646340
Nov 15 '18 at 9:32
I suppose you decide the the color on base of the value. How do you decide the size of the pie element 3+3+29+13 = 48; 11+18+23= 52;
– enxaneta
Nov 15 '18 at 9:39
@enxaneta I forget to tell you it is a baseball ground.Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
– user8646340
Nov 15 '18 at 10:25
Please update your question with what you tried, what you researched and what specific programming question you have about your current task. Do note Stack Overflow is not a free coding service, but a place where you can get answers or insight about your code.
– Andrei Gheorghiu
Nov 15 '18 at 11:18
I understand that the data can vary. Can you add an example of how your data (an object - I suppose) looks like?
– enxaneta
Nov 15 '18 at 9:28
I understand that the data can vary. Can you add an example of how your data (an object - I suppose) looks like?
– enxaneta
Nov 15 '18 at 9:28
@enxaneta It seems array(3,3,29,13,11,18,23);
– user8646340
Nov 15 '18 at 9:32
@enxaneta It seems array(3,3,29,13,11,18,23);
– user8646340
Nov 15 '18 at 9:32
I suppose you decide the the color on base of the value. How do you decide the size of the pie element 3+3+29+13 = 48; 11+18+23= 52;
– enxaneta
Nov 15 '18 at 9:39
I suppose you decide the the color on base of the value. How do you decide the size of the pie element 3+3+29+13 = 48; 11+18+23= 52;
– enxaneta
Nov 15 '18 at 9:39
@enxaneta I forget to tell you it is a baseball ground.Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
– user8646340
Nov 15 '18 at 10:25
@enxaneta I forget to tell you it is a baseball ground.Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
– user8646340
Nov 15 '18 at 10:25
Please update your question with what you tried, what you researched and what specific programming question you have about your current task. Do note Stack Overflow is not a free coding service, but a place where you can get answers or insight about your code.
– Andrei Gheorghiu
Nov 15 '18 at 11:18
Please update your question with what you tried, what you researched and what specific programming question you have about your current task. Do note Stack Overflow is not a free coding service, but a place where you can get answers or insight about your code.
– Andrei Gheorghiu
Nov 15 '18 at 11:18
add a comment |
1 Answer
1
active
oldest
votes
0
There are a few steps:
- you draw the individual paths
- you draw the paths for the text (text on a path)
- you draw the text
let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = ;// an array for the paths
class pathObj
constructor(a1,a2,R,r,path,text)
this.a1 = a1; //starting angle
this.a2 = a2; // ending angle
this.R = R;//the outer radius
this.r = r;// the middle radius
this.rm = r + 2*(R - r)/3; // the radius for the text path
this.path = document.querySelector(`#$path`);
this.textpath = document.querySelector(`#p$path`);
this.textElement = document.querySelector(`#t$path`);
this.textPath = document.querySelector(`#t$path textPath`);
this.textPath.textContent = text;
// points to draw the paths
this.p1 =
x:this.R*Math.cos(this.a1),
y:this.R*Math.sin(this.a1)
;
this.p2 =
x:this.R*Math.cos(this.a2),
y:this.R*Math.sin(this.a2)
this.p3 =
x:this.r*Math.cos(this.a2),
y:this.r*Math.sin(this.a2)
this.p4 =
x:this.r*Math.cos(this.a1),
y:this.r*Math.sin(this.a1)
this.p5 =
x:this.rm*Math.cos(this.a1),
y:this.rm*Math.sin(this.a1)
this.p6 =
x:this.rm*Math.cos(this.a2),
y:this.rm*Math.sin(this.a2)
draw()
// the d attribute for the main path
let d = `M$this.p1.x,$this.p1.y
A$this.R,$this.R 0 0 1 $this.p2.x,$this.p2.y
L$this.p3.x,$this.p3.y
A$this.r,$this.r 0 0 0 $this.p4.x,$this.p4.y
Z`;
// the d attribute for the text path
let d1 = `M$this.p5.x,$this.p5.y
A$this.R,$this.R 0 0 1 $this.p6.x,$this.p6.y`
this.path.setAttributeNS(null,"d",d);
this.textpath.setAttributeNS(null,"d",d1);
// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())svgborder:1px solid
pathstroke:black; fill:transparent;
text text-anchor:middle;<svg viewBox="-200 -250 400 250">
<defs>
<path id="pa" />
<path id="pb" />
<path id="pc" />
<path id="pd" />
<path id="pe" />
<path id="pf" />
<path id="pg" />
</defs>
<g transform="rotate(-135)">
<path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
<path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
<path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
<path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
<path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
<path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
<path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
1
Thanks for the reply. Let me accept this for spending your wonderful time for me.One more thing is it possible to design using path instead of javascript?
– user8646340
Nov 16 '18 at 8:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
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',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53316077%2fsvg-spray-chart%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
0
There are a few steps:
- you draw the individual paths
- you draw the paths for the text (text on a path)
- you draw the text
let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = ;// an array for the paths
class pathObj
constructor(a1,a2,R,r,path,text)
this.a1 = a1; //starting angle
this.a2 = a2; // ending angle
this.R = R;//the outer radius
this.r = r;// the middle radius
this.rm = r + 2*(R - r)/3; // the radius for the text path
this.path = document.querySelector(`#$path`);
this.textpath = document.querySelector(`#p$path`);
this.textElement = document.querySelector(`#t$path`);
this.textPath = document.querySelector(`#t$path textPath`);
this.textPath.textContent = text;
// points to draw the paths
this.p1 =
x:this.R*Math.cos(this.a1),
y:this.R*Math.sin(this.a1)
;
this.p2 =
x:this.R*Math.cos(this.a2),
y:this.R*Math.sin(this.a2)
this.p3 =
x:this.r*Math.cos(this.a2),
y:this.r*Math.sin(this.a2)
this.p4 =
x:this.r*Math.cos(this.a1),
y:this.r*Math.sin(this.a1)
this.p5 =
x:this.rm*Math.cos(this.a1),
y:this.rm*Math.sin(this.a1)
this.p6 =
x:this.rm*Math.cos(this.a2),
y:this.rm*Math.sin(this.a2)
draw()
// the d attribute for the main path
let d = `M$this.p1.x,$this.p1.y
A$this.R,$this.R 0 0 1 $this.p2.x,$this.p2.y
L$this.p3.x,$this.p3.y
A$this.r,$this.r 0 0 0 $this.p4.x,$this.p4.y
Z`;
// the d attribute for the text path
let d1 = `M$this.p5.x,$this.p5.y
A$this.R,$this.R 0 0 1 $this.p6.x,$this.p6.y`
this.path.setAttributeNS(null,"d",d);
this.textpath.setAttributeNS(null,"d",d1);
// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())svgborder:1px solid
pathstroke:black; fill:transparent;
text text-anchor:middle;<svg viewBox="-200 -250 400 250">
<defs>
<path id="pa" />
<path id="pb" />
<path id="pc" />
<path id="pd" />
<path id="pe" />
<path id="pf" />
<path id="pg" />
</defs>
<g transform="rotate(-135)">
<path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
<path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
<path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
<path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
<path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
<path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
<path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
1
Thanks for the reply. Let me accept this for spending your wonderful time for me.One more thing is it possible to design using path instead of javascript?
– user8646340
Nov 16 '18 at 8:13
add a comment |
0
There are a few steps:
- you draw the individual paths
- you draw the paths for the text (text on a path)
- you draw the text
let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = ;// an array for the paths
class pathObj
constructor(a1,a2,R,r,path,text)
this.a1 = a1; //starting angle
this.a2 = a2; // ending angle
this.R = R;//the outer radius
this.r = r;// the middle radius
this.rm = r + 2*(R - r)/3; // the radius for the text path
this.path = document.querySelector(`#$path`);
this.textpath = document.querySelector(`#p$path`);
this.textElement = document.querySelector(`#t$path`);
this.textPath = document.querySelector(`#t$path textPath`);
this.textPath.textContent = text;
// points to draw the paths
this.p1 =
x:this.R*Math.cos(this.a1),
y:this.R*Math.sin(this.a1)
;
this.p2 =
x:this.R*Math.cos(this.a2),
y:this.R*Math.sin(this.a2)
this.p3 =
x:this.r*Math.cos(this.a2),
y:this.r*Math.sin(this.a2)
this.p4 =
x:this.r*Math.cos(this.a1),
y:this.r*Math.sin(this.a1)
this.p5 =
x:this.rm*Math.cos(this.a1),
y:this.rm*Math.sin(this.a1)
this.p6 =
x:this.rm*Math.cos(this.a2),
y:this.rm*Math.sin(this.a2)
draw()
// the d attribute for the main path
let d = `M$this.p1.x,$this.p1.y
A$this.R,$this.R 0 0 1 $this.p2.x,$this.p2.y
L$this.p3.x,$this.p3.y
A$this.r,$this.r 0 0 0 $this.p4.x,$this.p4.y
Z`;
// the d attribute for the text path
let d1 = `M$this.p5.x,$this.p5.y
A$this.R,$this.R 0 0 1 $this.p6.x,$this.p6.y`
this.path.setAttributeNS(null,"d",d);
this.textpath.setAttributeNS(null,"d",d1);
// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())svgborder:1px solid
pathstroke:black; fill:transparent;
text text-anchor:middle;<svg viewBox="-200 -250 400 250">
<defs>
<path id="pa" />
<path id="pb" />
<path id="pc" />
<path id="pd" />
<path id="pe" />
<path id="pf" />
<path id="pg" />
</defs>
<g transform="rotate(-135)">
<path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
<path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
<path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
<path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
<path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
<path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
<path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
1
Thanks for the reply. Let me accept this for spending your wonderful time for me.One more thing is it possible to design using path instead of javascript?
– user8646340
Nov 16 '18 at 8:13
add a comment |
0
0
0
There are a few steps:
- you draw the individual paths
- you draw the paths for the text (text on a path)
- you draw the text
let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = ;// an array for the paths
class pathObj
constructor(a1,a2,R,r,path,text)
this.a1 = a1; //starting angle
this.a2 = a2; // ending angle
this.R = R;//the outer radius
this.r = r;// the middle radius
this.rm = r + 2*(R - r)/3; // the radius for the text path
this.path = document.querySelector(`#$path`);
this.textpath = document.querySelector(`#p$path`);
this.textElement = document.querySelector(`#t$path`);
this.textPath = document.querySelector(`#t$path textPath`);
this.textPath.textContent = text;
// points to draw the paths
this.p1 =
x:this.R*Math.cos(this.a1),
y:this.R*Math.sin(this.a1)
;
this.p2 =
x:this.R*Math.cos(this.a2),
y:this.R*Math.sin(this.a2)
this.p3 =
x:this.r*Math.cos(this.a2),
y:this.r*Math.sin(this.a2)
this.p4 =
x:this.r*Math.cos(this.a1),
y:this.r*Math.sin(this.a1)
this.p5 =
x:this.rm*Math.cos(this.a1),
y:this.rm*Math.sin(this.a1)
this.p6 =
x:this.rm*Math.cos(this.a2),
y:this.rm*Math.sin(this.a2)
draw()
// the d attribute for the main path
let d = `M$this.p1.x,$this.p1.y
A$this.R,$this.R 0 0 1 $this.p2.x,$this.p2.y
L$this.p3.x,$this.p3.y
A$this.r,$this.r 0 0 0 $this.p4.x,$this.p4.y
Z`;
// the d attribute for the text path
let d1 = `M$this.p5.x,$this.p5.y
A$this.R,$this.R 0 0 1 $this.p6.x,$this.p6.y`
this.path.setAttributeNS(null,"d",d);
this.textpath.setAttributeNS(null,"d",d1);
// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())svgborder:1px solid
pathstroke:black; fill:transparent;
text text-anchor:middle;<svg viewBox="-200 -250 400 250">
<defs>
<path id="pa" />
<path id="pb" />
<path id="pc" />
<path id="pd" />
<path id="pe" />
<path id="pf" />
<path id="pg" />
</defs>
<g transform="rotate(-135)">
<path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
<path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
<path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
<path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
<path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
<path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
<path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
There are a few steps:
- you draw the individual paths
- you draw the paths for the text (text on a path)
- you draw the text
let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = ;// an array for the paths
class pathObj
constructor(a1,a2,R,r,path,text)
this.a1 = a1; //starting angle
this.a2 = a2; // ending angle
this.R = R;//the outer radius
this.r = r;// the middle radius
this.rm = r + 2*(R - r)/3; // the radius for the text path
this.path = document.querySelector(`#$path`);
this.textpath = document.querySelector(`#p$path`);
this.textElement = document.querySelector(`#t$path`);
this.textPath = document.querySelector(`#t$path textPath`);
this.textPath.textContent = text;
// points to draw the paths
this.p1 =
x:this.R*Math.cos(this.a1),
y:this.R*Math.sin(this.a1)
;
this.p2 =
x:this.R*Math.cos(this.a2),
y:this.R*Math.sin(this.a2)
this.p3 =
x:this.r*Math.cos(this.a2),
y:this.r*Math.sin(this.a2)
this.p4 =
x:this.r*Math.cos(this.a1),
y:this.r*Math.sin(this.a1)
this.p5 =
x:this.rm*Math.cos(this.a1),
y:this.rm*Math.sin(this.a1)
this.p6 =
x:this.rm*Math.cos(this.a2),
y:this.rm*Math.sin(this.a2)
draw()
// the d attribute for the main path
let d = `M$this.p1.x,$this.p1.y
A$this.R,$this.R 0 0 1 $this.p2.x,$this.p2.y
L$this.p3.x,$this.p3.y
A$this.r,$this.r 0 0 0 $this.p4.x,$this.p4.y
Z`;
// the d attribute for the text path
let d1 = `M$this.p5.x,$this.p5.y
A$this.R,$this.R 0 0 1 $this.p6.x,$this.p6.y`
this.path.setAttributeNS(null,"d",d);
this.textpath.setAttributeNS(null,"d",d1);
// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())svgborder:1px solid
pathstroke:black; fill:transparent;
text text-anchor:middle;<svg viewBox="-200 -250 400 250">
<defs>
<path id="pa" />
<path id="pb" />
<path id="pc" />
<path id="pd" />
<path id="pe" />
<path id="pf" />
<path id="pg" />
</defs>
<g transform="rotate(-135)">
<path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
<path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
<path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
<path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
<path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
<path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
<path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = ;// an array for the paths
class pathObj
constructor(a1,a2,R,r,path,text)
this.a1 = a1; //starting angle
this.a2 = a2; // ending angle
this.R = R;//the outer radius
this.r = r;// the middle radius
this.rm = r + 2*(R - r)/3; // the radius for the text path
this.path = document.querySelector(`#$path`);
this.textpath = document.querySelector(`#p$path`);
this.textElement = document.querySelector(`#t$path`);
this.textPath = document.querySelector(`#t$path textPath`);
this.textPath.textContent = text;
// points to draw the paths
this.p1 =
x:this.R*Math.cos(this.a1),
y:this.R*Math.sin(this.a1)
;
this.p2 =
x:this.R*Math.cos(this.a2),
y:this.R*Math.sin(this.a2)
this.p3 =
x:this.r*Math.cos(this.a2),
y:this.r*Math.sin(this.a2)
this.p4 =
x:this.r*Math.cos(this.a1),
y:this.r*Math.sin(this.a1)
this.p5 =
x:this.rm*Math.cos(this.a1),
y:this.rm*Math.sin(this.a1)
this.p6 =
x:this.rm*Math.cos(this.a2),
y:this.rm*Math.sin(this.a2)
draw()
// the d attribute for the main path
let d = `M$this.p1.x,$this.p1.y
A$this.R,$this.R 0 0 1 $this.p2.x,$this.p2.y
L$this.p3.x,$this.p3.y
A$this.r,$this.r 0 0 0 $this.p4.x,$this.p4.y
Z`;
// the d attribute for the text path
let d1 = `M$this.p5.x,$this.p5.y
A$this.R,$this.R 0 0 1 $this.p6.x,$this.p6.y`
this.path.setAttributeNS(null,"d",d);
this.textpath.setAttributeNS(null,"d",d1);
// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())svgborder:1px solid
pathstroke:black; fill:transparent;
text text-anchor:middle;<svg viewBox="-200 -250 400 250">
<defs>
<path id="pa" />
<path id="pb" />
<path id="pc" />
<path id="pd" />
<path id="pe" />
<path id="pf" />
<path id="pg" />
</defs>
<g transform="rotate(-135)">
<path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
<path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
<path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
<path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
<path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
<path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
<path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = ;// an array for the paths
class pathObj
constructor(a1,a2,R,r,path,text)
this.a1 = a1; //starting angle
this.a2 = a2; // ending angle
this.R = R;//the outer radius
this.r = r;// the middle radius
this.rm = r + 2*(R - r)/3; // the radius for the text path
this.path = document.querySelector(`#$path`);
this.textpath = document.querySelector(`#p$path`);
this.textElement = document.querySelector(`#t$path`);
this.textPath = document.querySelector(`#t$path textPath`);
this.textPath.textContent = text;
// points to draw the paths
this.p1 =
x:this.R*Math.cos(this.a1),
y:this.R*Math.sin(this.a1)
;
this.p2 =
x:this.R*Math.cos(this.a2),
y:this.R*Math.sin(this.a2)
this.p3 =
x:this.r*Math.cos(this.a2),
y:this.r*Math.sin(this.a2)
this.p4 =
x:this.r*Math.cos(this.a1),
y:this.r*Math.sin(this.a1)
this.p5 =
x:this.rm*Math.cos(this.a1),
y:this.rm*Math.sin(this.a1)
this.p6 =
x:this.rm*Math.cos(this.a2),
y:this.rm*Math.sin(this.a2)
draw()
// the d attribute for the main path
let d = `M$this.p1.x,$this.p1.y
A$this.R,$this.R 0 0 1 $this.p2.x,$this.p2.y
L$this.p3.x,$this.p3.y
A$this.r,$this.r 0 0 0 $this.p4.x,$this.p4.y
Z`;
// the d attribute for the text path
let d1 = `M$this.p5.x,$this.p5.y
A$this.R,$this.R 0 0 1 $this.p6.x,$this.p6.y`
this.path.setAttributeNS(null,"d",d);
this.textpath.setAttributeNS(null,"d",d1);
// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())svgborder:1px solid
pathstroke:black; fill:transparent;
text text-anchor:middle;<svg viewBox="-200 -250 400 250">
<defs>
<path id="pa" />
<path id="pb" />
<path id="pc" />
<path id="pd" />
<path id="pe" />
<path id="pf" />
<path id="pg" />
</defs>
<g transform="rotate(-135)">
<path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
<path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
<path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
<path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
<path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
<path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
<path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
answered Nov 15 '18 at 12:53
enxanetaenxaneta
8,3322518
8,3322518
1
Thanks for the reply. Let me accept this for spending your wonderful time for me.One more thing is it possible to design using path instead of javascript?
– user8646340
Nov 16 '18 at 8:13
add a comment |
1
Thanks for the reply. Let me accept this for spending your wonderful time for me.One more thing is it possible to design using path instead of javascript?
– user8646340
Nov 16 '18 at 8:13
1
1
Thanks for the reply. Let me accept this for spending your wonderful time for me.One more thing is it possible to design using path instead of javascript?
– user8646340
Nov 16 '18 at 8:13
Thanks for the reply. Let me accept this for spending your wonderful time for me.One more thing is it possible to design using path instead of javascript?
– user8646340
Nov 16 '18 at 8:13
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53316077%2fsvg-spray-chart%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
I understand that the data can vary. Can you add an example of how your data (an object - I suppose) looks like?
– enxaneta
Nov 15 '18 at 9:28
@enxaneta It seems array(3,3,29,13,11,18,23);
– user8646340
Nov 15 '18 at 9:32
I suppose you decide the the color on base of the value. How do you decide the size of the pie element 3+3+29+13 = 48; 11+18+23= 52;
– enxaneta
Nov 15 '18 at 9:39
@enxaneta I forget to tell you it is a baseball ground.Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.
– user8646340
Nov 15 '18 at 10:25
Please update your question with what you tried, what you researched and what specific programming question you have about your current task. Do note Stack Overflow is not a free coding service, but a place where you can get answers or insight about your code.
– Andrei Gheorghiu
Nov 15 '18 at 11:18