CODEWITHSUNDEEP
csssvg
yavg
yavg

Reputation: 3051

text label svg, long text in other line

I have a long text. It text will be dynamic, can be short o long. How can I make the text stay in another line by exceeding the width of the text tag that contains it? I also want to know how to apply border style to the rect label.

thanks

https://jsfiddle.net/yftfy15q/

var svg = d3.select("body").append("svg");

var groupTooltip = svg.append("g")

var rect = groupTooltip.append('rect')
  .attr('width', 300)
  .attr('height', 100)
  .style('fill', 'white')
  .attr('class','myclass')
  .attr('stroke', 'black');


var text = groupTooltip.append('text').text('This is some information XDDDDDDDDDSSSSSSSSS XDDDD XDDDDDDDDDDDDDDDDDD')
  .attr('width', 100)
  .attr('x', 120)
  .attr('y', 30)
  .attr('id', 'tooltip_text')

var image = groupTooltip.append('image')
  .attr("x", 4)
  .attr('width', 100)
  .attr('height', 100)
  .attr('id', 'tooltip_image')
  .attr('xlink:href', 'https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png')

Upvotes: 0

Views: 611

Answers (1)

Amal
Amal

Reputation: 3426

You can split text to certain limit and then append it inside tspan. Here i limit text to 18 and append each inside tspan,positioned each accordingly.

var texts="This is some information XDDDDDDDDDSSSSSSSSS XDDDD XDDDDDDDDDDDDDDDDDD";
var list=[];
list=texts.match(/.{1,18}/g);
var text = groupTooltip.append('text')
  .attr('width', 100)
  .attr('x', 120)
  .attr('y', 30)
  .attr('id', 'tooltip_text')
for (i = 0; i < list.length; i++) {
  groupTooltip.select("text").append("tspan")
    .text(list[i])
    .attr("dy", i ? "1.2em" : 0)
    .attr("x", 110)
    .attr("text-anchor", "left")
    .attr("class", "tspan" + i);
}

The text element can be arranged in any number of sub-groups with the tspan element. Each tspan element can contain different formatting and position.

var svg = d3.select("body").append("svg");

var groupTooltip = svg.append("g")

var rect = groupTooltip.append('rect')
  .attr('width', 300)
  .attr('height', 100)
  .style('fill', 'white')
  .attr('class','myclass')
  .attr('stroke', 'black');

var texts="This is some information XDDDDDDDDDSSSSSSSSS XDDDD XDDDDDDDDDDDDDDDDDD";
var list=[];
list=texts.match(/.{1,18}/g);
var text = groupTooltip.append('text')
  .attr('width', 100)
  .attr('x', 120)
  .attr('y', 30)
  .attr('id', 'tooltip_text')
for (i = 0; i < list.length; i++) {
  groupTooltip.select("text").append("tspan")
    .text(list[i])
    .attr("dy", i ? "1.2em" : 0)
    .attr("x", 110)
    .attr("text-anchor", "left")
    .attr("class", "tspan" + i);
}

var image = groupTooltip.append('image')
  .attr("x", 4)
  .attr('width', 100)
  .attr('height', 100)
  .attr('id', 'tooltip_image')
  .attr('xlink:href', 'https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png')



  				
.myclass{
   stroke: blue;
   rx: 12;
   ry: 12;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>

Upvotes: 1

Related Questions