//Create an SVG path (based on bl.ocks.org/mbostock/2565344)
svg.append("path")
.attr("id", "wavy") //Unique id of the path
.attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30") //SVG path
.style("fill", "none")
.style("stroke", "#AAAAAA");
//Create an SVG text element and append a textPath element
svg.append("text")
.append("textPath") //append a textPath to the text element
.attr("xlink:href", "#wavy") //place the ID of the path here
.style("text-anchor","middle") //place the text halfway on the arc
.attr("startOffset", "50%")
.text("Yay, my text is on a wavy path");
[링크 : https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html]
[링크 : http://tutorials.jenkov.com/svg/path-element.html]
+2018.11.01
의외로 startOffset이 중요하다!
svg.append('text')
.append('textPath')
.attr({
startOffset: '50%',
'xlink:href': '#curvedTextPath'
})
.text('Hello, world!');
'Programming > d3' 카테고리의 다른 글
d3 svg circle (0) | 2018.11.01 |
---|---|
d3 svg string width in px (0) | 2018.11.01 |
d3 hyperlink (0) | 2018.10.31 |
d3 background image (0) | 2018.10.29 |
d3 pulse / blink (0) | 2018.10.29 |