javascript - 尝试使用链接来创建换行文本

Question

我正在使用 D3 和 SVG，并试图通过使用属性和链接来包装一些文本。这是我当前的代码:

vis.append("svg:text")
    .attr("x", "0")
    .attr("y", "0")
    .attr("text-anchor", "middle")
    .append("svg.tspan")
    .attr("dy", ".35em")
    .text("Revenue Split")
    .text("for Current Month")
    .attr("transform", "translate(50,50)")
    .attr("class", "title");

以上是尝试将此答案转换为使用 attr:https://stackoverflow.com/a/16701952/1179880

我的尝试没有在屏幕上显示任何内容。

---

更新

在当前两个答案的帮助下，我将我的代码修改为以下内容:

vis.append("svg:text")
    .attr("x", "0")
    .attr("y", "0")
    .attr("class", "title")
    .attr("text-anchor", "middle")
    //.attr("transform", "translate(50,50)")
    .text("Revenue Split")
    .append("svg:tspan")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text("for Current Month")
    .attr("class", "title");

它似乎正朝着正确的方向前进——尽管并不完全像预期的那样，而且在两条截然不同的线上。文本显示如下...

Answer 1

• 您正在使用 .当您需要一个 : 作为 tspan 元素的 d3 命名空间分隔符时(对于文本元素，它是正确的)
• 转换大概适用于文本元素，因此需要在 tspan 创建之前进行
• 两个文本内容将被覆盖，每个元素只能有一个。

总的来说，你可能想要这样的东西......

vis.append("svg:text")
    .attr("x", "0")
    .attr("y", "0")
    .attr("text-anchor", "middle")
    .attr("transform", "translate(50,50)")
    .text("Revenue Split")
    .append("svg:tspan")
    .attr("dy", ".35em")
    .text("for Current Month")
    .attr("class", "title");