svg text positioning, overlapping or two styles for same text element -


i have 2 different svg text elements aligned horizontally 1 other:

enter image description here

"title1", "20%" , "120.000" 3 independent svg objects.the 120.000 text element end anchored , 20% middle anchored.

what trying place 20% text appears on image setting same space between , 120.000 text. position of percentage set this:

canvas.append("text")           .attr("transform", "translate(" + ((width/2) - width/4) + " ," + (height/2 - 10) + ")")           .style("text-anchor", "end")           .text(function(d) { return data.values[0].percent}); 

where "width" , "height" total width , height of svg element holds piechart

the problem comes when right value text big: percentage text overlaps:

enter image description here

i place 2 pieces of text in same text element 2 pieces of text have different styles.

do have suggestions on how fix this?

the 2 solutions i've thought of are

  • to able set 2 different styles 2 parts of same text element
  • some way (that don't know) calculate exact space occupied text on right.

use a single <text> element 2 <tspan> children can individually style different <tspan> elements.


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -