Question

我试图在点击该特定文本时在数据标签的末尾附加一个新的文本元素。可能吗？我试图将其添加到我的代码中，但它没有显示要添加的文本：

circleGroup.selectAll("text")
           .data(data)
           .enter()
           .append("text")
           .text(function (d) {
                if (d.label) {
                    return d.label;
                }
                   return "";
                })
           .attr("x", function (d) {
                  return x(d.time) + 6;
            })
           .attr("y", function (d) {
                    return y(d.plotY) + 4;
                })
           .attr("font-size", "10px")
           .attr("fill", "#2d3d45")
           .on("click", function(d) {
                    d3.select(this).append("text").text("[A]").attr("x", function(d) {return x(d.time) + 25;}).attr("y", function(d) { return y(d.plotY) + 4;});

           });

但它已附加到数据标签上。

the documentation

为什么即使将“[A]”文本附加到父文本元素后也不会显示？

Answer 1

简短回答：您无法将place.name元素附加到另一个<text>元素。

根据SVG specs，

文本内容子元素是允许作为另一个文本内容元素的后代的文本内容元素。在SVG 1.1中，文本内容子元素如下：'altGlyph'，'textPath'，'tref'和'tspan'。

因此，解决方案是添加<text>代替：

<tspan>

var svg = d3.select("svg");
svg.append("text")
  .attr("x", 20)
  .attr("y", 20)
  .text("I am the text element")
  .append("tspan")
  .attr("dy", "1.5em")
  .attr("x", 20)
  .text("And I am the tspan element")

这会给你这个结构：

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

是否可以将文本附加到SVG中的文本元素？

1 个答案: