尝试使用链接创建包装文本答案

【问题标题】：Trying to use chaining to create wrapped text尝试使用链接创建包装文本
【发布时间】：2016-10-10 11:30:01
【问题描述】：

我正在使用 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");

它似乎正朝着正确的方向前进 - 尽管与预期的不太一样，而且在两条不同的线上。文字出现如下...

【问题讨论】：

标签： javascript d3.js svg

【解决方案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");

【讨论】：

是的，我正要问 OP 那个点而不是冒号是否是一个错字。
（上周才第一次阅读首字母缩略词svg，感谢您发现错字！）
@Robert - 这有很大帮助，但仍然行为不端 - 请查看我添加到原始帖子中的屏幕截图
@whytheq 你有一个 dy 属性，这就是它的作用。如果您不想要，请将其删除。
@RobertLongson 如果我注释掉.attr("dy", ".35em")，那么它会全部显示在 1 行

【解决方案2】：

您必须为text 元素定义文本，然后为tspan 元素定义文本：

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

【讨论】：

这有很大帮助，但仍然行为不端 - 请查看我添加到原始帖子中的屏幕截图
如果您希望“当月”在“收入分配”下，您必须设置x。再次价值，并可能增加dy。我刚刚编辑了答案，请检查一下。
一旦将此".35em" 调整为此1.1em，一切都会很愉快。

【解决方案3】：

Mark 在上面的 cmets 中的这段代码有效：

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

【讨论】：