将 SVG 文本更改为 css 自动换行
Posted
技术标签:
【中文标题】将 SVG 文本更改为 css 自动换行【英文标题】:change SVG text to css word wrapping 【发布时间】:2012-09-22 13:46:26 【问题描述】:以下代码用于显示 javascript 树形图的文本标签。
nodeEnter.append("svg:text")
.attr("x", function(d) return d._children ? -8 : -48; ) /*the position of the text (left to right)*/
.attr("y", 3) /*the position of the text (Up and Down)*/
.text(function(d) return d.name; );
这使用 svg,它没有自动换行功能。我如何改变这个做一个正常的段落
以便我可以使用 css 自动换行。如何制作这个常规文本而不是 svg 文本?
【问题讨论】:
【参考方案1】:这是使用 D3 自动换行文本的示例代码:
var nodes = [
title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut"
]
var w = 960, h = 800;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var vSeparation = 13, textX=200, textY=100, maxLength=20
var textHolder = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("x",textX)
.attr("y",textY)
.attr("text-anchor", "middle")
.each(function (d)
var lines = wordwrap(d.title, maxLength)
for (var i = 0; i < lines.length; i++)
d3.select(this).append("tspan").attr("dy",vSeparation).attr("x",textX).text(lines[i])
);
function wordwrap(text, max)
var regex = new RegExp(".0,"+max+"(?:\\s|$)","g");
var lines = []
var line
while ((line = regex.exec(text))!="")
lines.push(line);
return lines
【讨论】:
需要更多的自定义,但我喜欢它。它有效。 我能够修改您的技术以自动换行我的 X 轴标签。谢谢!同样作为参考,@mbostock 有一个更复杂的版本WrapLabels。最终,SVG 2.0 将包括自动换行。【参考方案2】:你可能想要使用 SVG foreignObject 标签,所以你会有这样的东西:
nodeEnter.append("foreignObject")
.attr("x", function(d) return d._children ? -8 : -48; ) /*the position of the text (left to right)*/
.attr("y", 3) /*the position of the text (Up and Down)*/
.attr("width", your_text_width_variable)
.attr("height", your_text_height_variable)
.append("xhtml:body")
.append("p")
.text(function(d) return d.name; );
这是 Mike Bostock 的一个要点,它帮助了我:https://gist.github.com/1424037
【讨论】:
我试过了,但现在没有文字出现。我正在尝试将此应用于bl.ocks.org/1249394,此示例。这是我问题中的代码的来源。是不是因为节点是 svg 圆圈而不起作用? 抱歉,应该包含 foreignObject 的宽度和高度 - 我已经修改了答案中的代码以使其更清晰foreignObject
似乎是唯一的解决方案,但请注意,IE 不支持它(惊喜!)
有没有用 foreignObject 模拟text-anchor: middle;
效果?【参考方案3】:
foreignObject
不受 IE 支持,Chrome 也不支持其上的转换。如果这些限制没问题,那么我建议使用foreignObject
,因为您可以获得 HTML+CSS 的所有格式。
如果您需要支持 IE 或转换,那么我建议使用 D3 插件,例如 D3plus。它使文本换行变得非常容易。
d3plus.textwrap()
.container('selector')
.draw();
结帐the docs 了解其所有功能。
【讨论】:
【参考方案4】:您可以通过 D3.js 使用这个通用函数将 svg:text 元素中的文本包装成多个 svg:tspan 子元素(每行一个 tspan):
function wrapText(text, width)
text.each(function ()
var textEl = d3.select(this),
words = textEl.text().split(/\s+/).reverse(),
word,
line = [],
linenumber = 0,
lineHeight = 1.1, // ems
y = textEl.attr('y'),
dx = parseFloat(textEl.attr('dx') || 0),
dy = parseFloat(textEl.attr('dy') || 0),
tspan = textEl.text(null).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em');
while (word = words.pop())
line.push(word);
tspan.text(line.join(' '));
if (tspan.node().getComputedTextLength() > width)
line.pop();
tspan.text(line.join(' '));
line = [word];
tspan = textEl.append('tspan').attr('x', 0).attr('y', y).attr('dx', dx).attr('dy', ++linenumber * lineHeight + dy + 'em').text(word);
);
你可以这样使用它:
svg.selectAll('text').call(wrapText, 100);
【讨论】:
以上是关于将 SVG 文本更改为 css 自动换行的主要内容,如果未能解决你的问题,请参考以下文章