使用 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 = [

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