在d3js的svg圈子内添加svg文本

Question

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

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

以下是代码。

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;

}