使用 d3.js 绘制多个带有文本的圆圈

Question

我是一个新的 javascript 程序员。我正在尝试制作一个基于类别绘制圆圈的可视化（“基本上每个圆圈上都有一个类别”）。我的问题是我的代码只打印一个圆圈，所有类别都在彼此之上。

 <script> 

        var width = 600;

        var height = 600;

        var data = d3.json("/data", function(error, data){

                    console.log(data)

        // Make SVG container 

        var svgContainer = d3.select("body")

                             .append("svg")

                             .attr("width", width)

                             .attr("height", height);

        var elem = svgContainer.selectAll("div")

                               .data(data);

        var elemEnter = elem.enter()

                            .append("g")

        var circles = elemEnter.append("circle")

                              .attr("cx", 100)

                              .attr("cy", 100)

                              .attr("r",80)

                              .style("fill", "blue")

        elemEnter.append("text")

                 .attr("dy", function(d){

            return d.SkillProficiencyId +80;

            }).attr("dx",function(d){ return d.SkillProficiencyId-1;})

                    .text(function(d){return d.CategoryName});

        });

    </script>

Answer 1

我创建了一个动态创建圆圈的示例，其中文本居中。https://codepen.io/mayconmesquita/pen/OJyRZxX演示：JS 代码： [已编辑 *]var width = 600;var height = 600;// Place your JSON here.var data = [&nbsp; { CategoryName: 'Adaptive Security', SkillProficiencyId: 1 },&nbsp; { CategoryName: 'Programmer', SkillProficiencyId: 2 },&nbsp; { CategoryName: 'Coffee Drinker', SkillProficiencyId: 3 }];/*&nbsp; This 'cxBase' will be multiplied by element's index, and sum with offset.&nbsp; So for 3 elements, cx = 0, 200, 400 ...&nbsp; All these values changeable by this vars.*/const cxBase = 200;const cxOffset = 100;console.log(data);// Make SVG container&nbsp;&nbsp;var svgContainer = d3.select("body").append("svg").attr("width", width).attr("height", height);// This function will iterate your datadata.map(function(props, index) {&nbsp; var cx = cxBase * (index) + cxOffset; // Here CX is calculated&nbsp; var elem = svgContainer.selectAll("div").data(data);&nbsp; var elemEnter = elem.enter()&nbsp; .append("g")&nbsp; var circles = elemEnter.append("circle")&nbsp; .attr("cx", cx)&nbsp; .attr("cy", 100)&nbsp; .attr("r", 80)&nbsp; .style("fill", "blue");&nbsp; elemEnter&nbsp; .append("text")&nbsp; .style("fill", "white")&nbsp; .attr("dy", function(d){&nbsp; &nbsp; return 105;&nbsp; })&nbsp; .attr("dx",function(d){&nbsp; &nbsp; return cx - (props.CategoryName.length * 3.5);&nbsp; })&nbsp; .text(function (d) {&nbsp; &nbsp; return props.CategoryName&nbsp; });});编辑：按照作者的要求，我确实改进了代码。现在圆的 cx 坐标是根据数组元素的索引动态计算的。/*&nbsp; This 'cxBase' will be multiplied by element's index, and sum with offset&nbsp; So for 3 elements, cx = 0, 200, 400 ...&nbsp; All these values changeable by this vars.*/const cxBase = 200;const cxOffset = 100;