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

Adding svg text inside svg circle in d3js

本文关键字：svg 添加 文本 d3js 中的      更新时间：2023-09-26

我正试图用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>

不能将<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;
}
相关文章：