用javascript中的d3绘制圆圈并在上面写文字

Drawing circles and writing text on them using d3 in javascript

本文关键字：在上面 文字 javascript 中的 d3 绘制      更新时间：2024-02-14

我是一名新的javascript程序员。我正在尝试制作一个可视化组件，其中我必须画一个圆圈并在上面写一些东西（"基本上每个圆圈上都有一个字母"），代码如下

    var svgcontainer = d3.select("body").append("svg") 
                                    .attr("width",width)
                                    .attr("height",height);
d3.json("real.json",function(json){
    var elem = svgcontainer.selectAll("div")
                  .data(json.residues);
    var elemEnter = elem.enter()
        .append("g");
    var circle = elemEnter.append("circle")
                          .attr("cx",50)
                          .attr("cy",50)
                          .attr("r",10)
                          .style("fill","red");
    elemEnter.append("text")
             .attr("dx",-20)
             .text(function(d){return d.name});
 }) ;

代码是画圆圈，但不在上面写任何字母。json示例文件如下

{
"residues":[
    {"name":"A","mut":[
         {"what":"A1H","type":"non-neutral"}
    ]},    
    {"name":"H"}
]}

请帮我修改代码，在上面画一个圆圈并写一个字母。

 var svgcontainer = d3.select("body").append("svg") 
                                    .attr("width", 200)
                                    .attr("height",200);
//d3.json("real.json",function(json){
var json = {
"residues":[
    {"name":"A","mut":[
         {"what":"A1H","type":"non-neutral"}
    ],"cx": 50,"cy":50, "r":20},    
    {"name":"H","cx": 90,"cy":80, "r":20}
]};
    var elem = svgcontainer.selectAll("div")
                  .data(json.residues);
    var elemEnter = elem.enter()
        .append("g");
    var circle = elemEnter.append("circle")
                          .attr("cx",function(d){ return d.cx;})
                          .attr("cy",function(d){ return d.cy;})
                          .attr("r",function(d){ return d.r;})
                          .style("fill","red");
    elemEnter.append("text")
             .attr("dy", function(d){
      return d.cy+5;
    }).attr("dx",function(d){ return d.cx-5;})
             .text(function(d){return d.name});
 //}) ;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

var circle = elemEnter.append("circle")
                          .attr("cx",50)
                          .attr("cy",50)
                          .attr("r",10)
                          .style("fill","red");

不要使用静态值来设置圆的cx、cy和r值，使用静态值会将所有圆设置在一个位置，我们不能看到所有圆，只有圆可见。

elemEnter.append("text")
         .attr("dx",-20)
         .text(function(d){return d.name});

在这里，我们还将文本的dx值设置为-20，负值将从svg中取出元素，所以我们看不到文本，尝试根据圆cx和cy设置文本的dx和dy值，这将同时设置这两个值。

我做了所有的改变，希望你拿到了。如果不要求我更多。

相关文章：