javascript - 在d3js中的svg圆圈内添加svg文本

Question

我正在尝试将文本添加到使用 d3.js 用 SVG 制作的圆圈中

文本没有出现在圆圈内。当我检查该元素时，我可以看到文本元素已添加到 DOM 中，并且所需的文本也已添加到文本元素内，但它没有出现。我做错了什么？

以下是代码。

CreateNode 创建圆

var Xvalue = 100;
var Yvalue = 100;

$(document).ready(function() {
  var graphContainer =  d3.select("body").append("svg").attr("width", 500).attr("height", 600).attr("class","graph-container");
  var root = CreateNode(1,"root","head","main");
});

function CalculateX(nodeType) {
  if(nodeType=="main") {
    return(Xvalue+30);
  }
}

function CalculateY(nodeType) {
  if(nodeType=="main") {
    return(Yvalue);
  }
}

function CreateNode(nodeId,label,className,nodeType) {   
  var node = d3.select("svg")
  .append("circle")
  .attr("cx", CalculateX(nodeType))
  .attr("cy", CalculateY(nodeType))
  .attr("r",40)
  .style("fill","none")
  .style("stroke","#ccc")
  .attr("nodeId",nodeId)
  .attr("class",className);

  node =  node.append("text")
  .attr("x", CalculateX(nodeType))             
  .attr("y", CalculateY(nodeType))
  .attr("text-anchor", "middle")  
  .style("font-size", "14px")
  .attr('fill','#cccccc')
  .text(label);
  return node;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>

Answer 1

您不能放置 <text> <circle></circle> 内的节点节点。您需要将它们一个接一个地堆叠起来。您可以同时添加 <circle>和<text>到 <g>元素。试试这个片段

function CreateNode(nodeId,label,className,nodeType)
{   
  var node = d3.select("svg").append('g');

  node.append("circle")
   .attr("cx", CalculateX(nodeType))
   .attr("cy", CalculateY(nodeType))
   .attr("r",40)
   .style("fill","none")
   .style("stroke","#ccc")
   .attr("nodeId",nodeId)
   .attr("class",className);

   node.append("text")
    .attr("x", CalculateX(nodeType))             
    .attr("y", CalculateY(nodeType))
    .attr("text-anchor", "middle")  
    .style("font-size", "14px")
    .attr('fill','#cccccc')
    .text(label);

    return node;

}