Question

我想在D3生成的SVG文本中将长句子分成两行。但我不能在D3/javascript中这样做。我尝试使用\n和<br/>，但它们无效。

<!DOCTYPE html>
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
    var margin = {top: 80,left: 70, bottom: 80,right: 100},
        height = 660 - margin.top - margin.bottom,
        width = 1320 - margin.left - margin.right;

    var chart = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate("+margin.left+","+margin.top+")");

    chart.append('text')
        .attr('x', 100)
        .attr('y', 100)
        .text("I want to have this \n sentence in two lines")
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .style("font-family", "Helvetica, Arial, sans-serif")
        .style("font-weight", "bold")
        .style("font-size", "16px" )
        .style("fill", "#1ABC9C");

</script>
</body>
</html>

Answer 1

使用.append("foreignObject").append("xhtml:span").html("your text <br> will goes here");代替.text()功能。

示例：

var mytext=svg.append("foreignObject").attr("width"100).attr("height",50).append("xhtml:span")
.html("Your Text <br> goes here");

你不需要这里的br标签，当达到指定的宽度时，文本将自动包装到下一行。

Answer 2

改为：

var textNode = chart.append('text');
textNode.attr('x', 100)
    .attr('y', 100)
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .style("font-family", "Helvetica, Arial, sans-serif")
    .style("font-weight", "bold")
    .style("font-size", "16px" )
    .style("fill", "#1ABC9C");
textNode.append("span").text("I want to have this");
textNode.append("br");
textNode.append("span").text("sentence in two lines");

Answer 3

在我看来，Mehran是对的 - 你必须使用.append("tspan")来表示多行SVG文本。对Mehran +1投票。我还想提请你注意最近question and answer。您将看到与.append("tspan")非常相似的解决方案如果您需要以编程方式将字符串拆分为多行（能够为拆分定义“宽度”），那么还有一个函数wordwrap2（）。我花了很多时间为这个目的找到合适的功能，这个功能经过了充分的测试。

关于这个主题还有其他问题，也许你会在那里找到有用的东西：

How do I include newlines in labels in D3 charts?

Breaking text from json into several lines for displaying labels in a D3 force layout

How to break a line in d3.axis.tickFormat?

Auto line-wrapping in SVG text（“异物”的替代方法）

不能在D3生成的SVG文本中打破长句

3 个答案: