テキストラベルsvg、他の行に長いテキスト

Question

長いテキストがあります。テキストは動的になり、短くても長くなります。テキストを含むテキストタグの幅を超えてテキストを別の行に残すにはどうすればよいですか？また、rectラベルにborderスタイルを適用する方法も知りたい。

おかげ

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') 

Answer 1

あなたは一定の限界にテキストを分割し、その後tspanの内側にそれを追加することができます。 ここでは、テキストを18に制限し、それぞれ内側にtspanを追加します。

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); 
} 

text要素は tspan素子とサブグループの任意の数で配置することができます。各tspan要素には異なる書式設定があり、 の位置を含むことができます。

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') 
 

 

 

 
    \t \t \t \t

.myclass{ 
 
    stroke: blue; 
 
    rx: 12; 
 
    ry: 12; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>