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

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");

Answer 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");

Answer 3

Mark在上述评论中的代码有效：

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");