D3.js中的圆圈仅显示没有圆圈的文本(Circle in D3.js only displaying text without circle)

 我正在尝试使用带有文本的d3.js绘制一个圆圈。 这是我的代码： 
 
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<div class="circles"></div>
<script>

$(document).ready(function () {
    circles();

    $(".circles").show();
    function circles() {
        var svg = d3.select(".circles");

        var groups = svg.selectAll("div")
            .data("DEMO")
            .enter()
            .append("div");

        groups.attr("transform","translate(" +100+ "," +100+ ")");

        var circles = groups.append("circle")
                    .attr("cx", "100")
                    .attr("cy","100")
                    .attr("r", "100")
                    .attr("fill", "red")
                    .attr("stroke-width","2.4192")
                    .attr("stroke","#00ffff");

        var label = groups.append("text")
            .text(function(d){
              return d;
            })
            .attr({
              "alignment-baseline": "middle",
              "text-anchor": "middle",
              "font-family":"Arial",
              "font-size":"30",
              "fill":"white"
            });
    }
});
</script>
 
 但它只显示文本，并且没有显示圆圈。 我无法修复它。 任何人都可以指出我的错误，并帮助我解决它。 

I am trying to draw a circle using d3.js with text inside it. Here is my code:
 
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<div class="circles"></div>
<script>

$(document).ready(function () {
    circles();

    $(".circles").show();
    function circles() {
        var svg = d3.select(".circles");

        var groups = svg.selectAll("div")
            .data("DEMO")
            .enter()
            .append("div");

        groups.attr("transform","translate(" +100+ "," +100+ ")");

        var circles = groups.append("circle")
                    .attr("cx", "100")
                    .attr("cy","100")
                    .attr("r", "100")
                    .attr("fill", "red")
                    .attr("stroke-width","2.4192")
                    .attr("stroke","#00ffff");

        var label = groups.append("text")
            .text(function(d){
              return d;
            })
            .attr({
              "alignment-baseline": "middle",
              "text-anchor": "middle",
              "font-family":"Arial",
              "font-size":"30",
              "fill":"white"
            });
    }
});
</script>
 
But it displays only the text and the circle is not being displayed. I am unable to fix it. Can anyone please point out my mistake and help me fix it.

原文：https://stackoverflow.com/questions/35388385