在d3js

Question

我正在尝试将文字添加到使用SVG

的d3.js中制作的圈子中

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

以下是代码。

CreateNode创建圈子

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;

}