Question

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

    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

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

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

这里我们也用-20设置文本的dx值，负值将svg中的元素取出，所以我们无法看到文本，尝试根据圆圈设置文本的dx和dy值cx和cy值将这两者组合在一起。

我做了所有的改变，希望你明白了。如果没有问我更多。

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

1 个答案: