Question

使用D3创建力图。我想点击一个按钮，然后出现一个矩形（我已经完成了）。现在我想用几行文字附加这个矩形文本。

我想要显示三个句子，每行一个，所以我知道换行符应该在哪里。

我试过这些：

.text("test" + "\n" + "should be on second line");

.text("test" + "\\n" + "should be on second line");

.text("test" + "<br/>" + "should be on second line");

.html("test" + "\n" + "should be on second line");

.html("test" + "\\n" + "should be on second line");

.html("test" + "<br/>" + "should be on second line");

它们似乎都没有用，我不确定为什么。我已经四处寻找，人们正在做一些黑客来解决这个问题。当然有一种更简单的方法吗？

Answer 1

当我使用D3时，我已经弄明白了并为我工作。我创建了一个数组（我希望显示的文本），然后创建了一个在单独的行上分割数组的函数。

var popUpTextArray = ["first line", "second line", "third line"];

function textMultipleRows(textArray, area, xPos, yPos){

    for(i=0;i<textArray.length;i++){
        d3.selectAll(area) //-area you wish to append the text to
        .append("text")
        .classed("popUpTextLeft", true) //-CSS class for the text
        .attr("x", xPos)
        .attr("y", yPos+(i*20)) //-new line when going through the loop
        .text(textArray[i]); //-goes through each element in the text array
    }   
}

textMultipleRows(popUpTextArray, "#window1", 300,200);

有点hacky，它由D3组成，所以我不知道是否有很多人会使用它，但正如我所说，它对我来说非常合适。

如何使用SVG文本元素进行换行？

1 个答案: