我的文字很长。它的文本将是动态的,可以很短也可以很长。如何通过超过包含它的文本标签的宽度使文本留在另一行中?我还想知道如何将边框样式应用于矩形标签。
谢谢
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')
最佳答案
您可以将文本拆分到一定的限制,然后将其附加到 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);
}
The
text
element can be arranged in any number of sub-groups with thetspan
element. Eachtspan
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>
关于css - 文本标签 svg,其他行中的长文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45808995/