d3.js - 从函数附加时文本元素不可见

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

标签： d3.jssvgdata-visualization

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>