0

I have a rectangle and a text created through D3 which are grouped together like below.

<g>
<rect></rect>
<text></text>
</g>

In a javascript function I'm expanding this rectangle's width to allow the the value of text to be displayed in one go. (If the value is too long as the text value is set dynamically). This is working fine. However even though the rectangle width is expanding depending on the text value size , D3 text element is not showing the complete text value that is added, eventually the text is moved to left and the first bit of it can't be seen.

Do I need to increase the text element's width too or what would be the solution for this?

[UPDATE]

Following is the current code. 

var elms = d3.selectAll("[id=s]"); // has the rectangle and text elements 
        var s  = d3.selectAll("[id=s]").selectAll("text"); // just the text elements
       var minimumValue = 100;
        // updating rectangle width 
       elms.attr('width', function() { return dynamic < minimumValue ? minimumValue : dynamic;});

Now I need a way to update the position of the text element when the rectangle is expanded. Hope this is more clear. I just tried manually updating 'x' property of text element that works. But can I derive this value dynamically to set it within this function?

user2894296
  • 590
  • 1
  • 10
  • 20
  • Hi Gerardo, yes basically I need to alter text 'x' property value to move the starting point as the rectangle is expanded. I need to place the text within the rectangle. Would textLength help in deriving this? – user2894296 Oct 26 '16 at 13:59
  • Not in this case. We need to see actual code to help you here. – Gerardo Furtado Oct 26 '16 at 14:20

1 Answers1

0

In case someone is looking for this, was able to get the text new 'x' value by x of rectangle + half of rectangle's width (and similar for y but with the height).

Got the answer from this link (How to place and center text in an SVG rectangle)

Community
  • 1
  • 1
user2894296
  • 590
  • 1
  • 10
  • 20