0

My question is regarding how to center multiple elements in one node after line wrapping. I'm utilizing code example given here on word wrapping: http://bl.ocks.org/mbostock/7555321 to create multiple tspan objects.

After creating/drawing all the tspan objects, I define the location of the X and Y. First I get the text area of the entire tspan and create a box around it: 

var tspanbbox = d3.select(this).select("tspan").node().getBBox();
var node_bbox = {"height": tspanbbox.height+5, "width": tspanbbox.width+5}; 
var rect = d3.select(this).select('rect');
rect.attr("x", -node_bbox.width/2).attr("y", -node_bbox.height/2)
rect.attr("width", node_bbox.width).attr("height", node_bbox.height+10);

and then I added the attribute for the tspan, the text that's within rect. 

tspan.attr("x", -node_bbox.x).attr("y", -node_bbox.y);

This code correctly prints a box around the area around the text, but there's overflowing text.

https://i.stack.imgur.com/iHTUN.jpg

So what I'm trying to do is to center the group as an entity rather than the first tspan (what I'm assuming is the first line after the GO term). If I try to alter the tspan attribute (as shown in the code above), only one of the tspan objects move. If I do it with all of them using selectAll("tspan"), all of them the tspans are grouped on the same y axis.

Is there any way of going about this properly?

David Ma
  • 59
  • 11
  • I'm also interested in this. In my project I'm using centered multiple texts like you do. But I currently don't have a background box on them. Could maybe share how you did that box or using the code above? I tried it in the way of Robert told, but it just comes with errors: http://stackoverflow.com/questions/17218108/rectangle-border-around-svg-text – kwoxer Jun 26 '15 at 17:29
  • @kwoxer So actually I found the solution with my problem. If you are trying to solve that, for future references, you can check the number of lines inputted total and make adjustments on the y attribute based on how many lines are implemented (so it's a little manual and archaic but it works). I'm pretty new with d3.js/only modifying someone else's code so I don't know if I can answer your question, but most of the work done with creating rect is done on the code implemented above (without the css attached to the rect). What specific issues do you have? – David Ma Jun 26 '15 at 19:02

1 Answers1

0

If anyone else is running into this issue, you can check the number of lines inputted total and make adjustments on the y attribute based on how many lines are implemented (so it's a little manual and archaic but it works).

David Ma
  • 59
  • 11