Question

我具有这种结构（svg圆是从CorelDRAW生成的）：

<g class="item"> 
<circle class="grad Pazin" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 342.854 286.821)" r="7"/
<circle class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"/>
</g>

我想要这个结构：

<g class="item"> 
<circle class="grad Pazin" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 342.854 286.821)" r="7"/
<text xmlns="http://www.w3.org/1999/xhtml" font-family="sans-serif" font-size="20px" fill="black">0</text>
<circle class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"/>
<text xmlns="http://www.w3.org/1999/xhtml" font-family="sans-serif" font-size="20px" fill="black">1</text>
</g>

我尝试了下选项，但这会在圆圈节点内生成文本节点。

var grad = karta.selectAll("g.item circle");
var data = grad.append("text")
  .text(function(d, i) {return i+1;})
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "black");

我也找到了这个答案，因为我认为是同样的问题： d3.js - how to insert new sibling elements并将其应用于我的情况：

var grad = karta.selectAll("g.item circle").each(function() {
  var t = document.createElement("text");
  this.parentNode.insertBefore(t, this.nextSibling);

}）;

var data = karta.selectAll("g.item text")
  .text("function(d, i) {return i+1;}")
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "black");

文本节点根据需要在DOM中生成，但是由于某些原因，文本未显示。

我该如何解决这个问题？我需要为每个圆圈生成文本。

Answer 1

您的代码的主要问题是这个...

var grad = karta.selectAll("g.item circle");
var data = grad.append("text")//etc...

...将<text>元素追加到<circle>元素。当然，圈子不能成为文本的父项。

您必须使用其他方法，例如insert。由于insert在您的特定情况下会非常麻烦，因此我更喜欢使用普通JavaScript：

d3.selectAll("circle")
.select(function() {
    return this.parentNode.insertBefore(document.createElementNS("http://www.w3.org/2000/svg", "text"), this.nextSibling)
})

这将创建以下结构：

<g class="item">
    <circle class="grad Pazin" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 342.854 286.821)" r="7"></circle>
    <text></text>
    <circle class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"></circle>
    <text></text>
</g>

这是一个演示（什么都不会显示，请使用dev工具来检查SVG）：

const circles = d3.selectAll("circle")
  .select(function() {
    return this.parentNode.insertBefore(document.createElementNS("http://www.w3.org/2000/svg", "text"), this.nextSibling)
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg><g class="item"><circle class="grad Pazin" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 342.854 286.821)" r="7"/><circle class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"/></g></svg>

如何为svg组的每个现有的圆形元素插入文本同级元素？

1 个答案: