Question

我正在尝试使用带有文本的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>

但它只显示文字，并且没有显示圆圈。我无法解决它。任何人都可以指出我的错误并帮助我解决它。

Answer 1

您在HTML中附加<circle>元素，而非SVG。它没有任何意义，因此它不会被渲染。你需要附加一个svg元素，然后将你的圆和文本节点附加到那个。

填充，描边宽度和笔划也应该使用.style代替.attr。

一些相关的代码更改是：

var svg = d3.select('.circles').append('svg') // added .append('svg')
    .attr('height', /* set the height */)
    .attr('width', /* set the width */);

var groups = svg.selectAll('g')               // 'g' instead of 'div'
    .data('DEMO')
    .enter().append('g');

D3.js中的圆圈仅显示没有圆圈的文本

1 个答案: