从函数追加时，文本元素不可见

Question

我想使用append（）函数中的函数向d3可视化中添加文本。但是即使生成的DOM也与添加静态文本（将文本直接传递到append（）时）完全一样，在svg画布上也不可见。

var svg = d3.select("body").append("svg");
svg.attr("width", 800);
svg.attr("height", 600);

svg.selectAll("g.m1").data([1, 2, 3])
  .enter()
  .append("g")
  .attr("class", "m1")
  .attr("transform", "translate(50,50)")
  .append("text")
  .attr("dy", function(d) {
    return d + ".0em"
  })
  .text(function(d) {
    return "Hello world directly: " + d;
  });

svg.selectAll("g.m2").data([1, 2, 3])
  .enter()
  .append("g")
  .attr("class", "m2")
  .attr("transform", "translate(50,150)")
  .append(function(d) {
    var t = d3.create("text");
    t.attr("dy", d + ".0em")
      .text("Hello world via function: " + d);
    return t.node();
  });

svg {
  border: 3px solid red;
}

text {
  fill: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

在输出中，我仅看到“ m1”文本中的文本，而看不到“ m2”文本中的文本。甚至输出的HTML完全一样： https://imgur.com/a/2xusuPD

Answer 1

如果要创建断开连接的SVG元素，则必须提供名称空间，即svg：text而不是仅提供文本。

var svg = d3.select("body").append("svg");
svg.attr("width", 800);
svg.attr("height", 600);

svg.selectAll("g.m1").data([1, 2, 3])
  .enter()
  .append("g")
  .attr("class", "m1")
  .attr("transform", "translate(50,50)")
  .append("text")
  .attr("dy", function(d) {
    return d + ".0em"
  })
  .text(function(d) {
    return "Hello world directly: " + d;
  });

svg.selectAll("g.m2").data([1, 2, 3])
  .enter()
  .append("g")
  .attr("class", "m2")
  .attr("transform", "translate(50,150)")
  .append(function(d) {
    var t = d3.create("svg:text");
    t.attr("dy", d + ".0em")
      .text("Hello world via function: " + d);
    return t.node();
  });

svg {
  border: 3px solid red;
}

text {
  fill: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>