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

Question

我是一名新 javascript 程序员。我正在尝试制作一个基于类别 ("basically a single category on every circle") 绘制圆圈的可视化效果。我的问题是我的代码只打印一个圆圈，所有类别都在彼此之上。

 <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>

> Sample of my Data
(18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
EmployeeId: 11111
AdUserName: null
FirstName: "ABC"
LastName: "DEF"
SkillId: 2346
CategoryName: "Adaptive Security Architecture"
SkillProficiencyId: 1
SkillProficiencyLevel: "Beginner"
__proto__: Object
1: {EmployeeId: 11111, AdUserName: null, FirstNam...
2: {EmployeeId: 11111, AdUserName: null, FirstName....

Answer 1

我创建了一个动态创建的圆圈示例，其中文本居中。

https://codepen.io/mayconmesquita/pen/OJyRZxX

演示：

JS代码：[编辑*]

var width = 600;
var height = 600;

// Place your JSON here.
var data = [
  { CategoryName: 'Adaptive Security', SkillProficiencyId: 1 },
  { CategoryName: 'Programmer', SkillProficiencyId: 2 },
  { CategoryName: 'Coffee Drinker', SkillProficiencyId: 3 }
];

/*
  This 'cxBase' will be multiplied by element's index, and sum with offset.
  So for 3 elements, cx = 0, 200, 400 ...
  All these values changeable by this vars.
*/
const cxBase = 200;
const cxOffset = 100;

console.log(data);

// Make SVG container  
var svgContainer = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);

// This function will iterate your data
data.map(function(props, index) {
  var cx = cxBase * (index) + cxOffset; // Here CX is calculated

  var elem = svgContainer.selectAll("div").data(data);

  var elemEnter = elem.enter()
  .append("g")

  var circles = elemEnter.append("circle")
  .attr("cx", cx)
  .attr("cy", 100)
  .attr("r", 80)
  .style("fill", "blue");

  elemEnter
  .append("text")
  .style("fill", "white")
  .attr("dy", function(d){
    return 105;
  })
  .attr("dx",function(d){
    return cx - (props.CategoryName.length * 3.5);
  })
  .text(function (d) {
    return props.CategoryName
  });
});

编辑：

应作者要求，我确实改进了代码。现在圆的 cx 坐标是根据数组元素的索引动态计算的。

/*
  This 'cxBase' will be multiplied by element's index, and sum with offset
  So for 3 elements, cx = 0, 200, 400 ...
  All these values changeable by this vars.
*/
const cxBase = 200;
const cxOffset = 100;

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

Drawing multiple circles with text in them using d3.js

javascript

d3.js

circle-pack