在 javascript 中使用 d3 绘制圆圈并在圆圈上书写文字

Question

我是一名新 javascript 程序员。我正在尝试制作一个可视化组件，其中我必须画一个圆并在上面写一些东西（"basically a single letter on every circle"）代码如下

    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"}
]}

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

Answer 1

 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，所以我们看不到文字，尝试根据圆圈设置文字的dx和dy值cx 和 cy 值这会将两者设置在一起。

我做了所有的改变，希望你明白了。不行再问我。

在 javascript 中使用 d3 绘制圆圈并在圆圈上书写文字

Drawing circles and writing text on them using d3 in javascript

javascript

svg

visualization

d3.js