如何使用带有标签和值的d3js来堆叠圆圈

Question

我需要使用等距间隔的堆叠圆来显示数据。 d3.js新手搜索参考，但没有找到的地方。

  d3.json("js/data/circlechart.json", function(error, jsonData) {

    if (error) return console.warn(error);

    var len = jsonData.length;
    var color = ["#80a1e6", "#5c7dc1" , "#4062a8", "#345499" , "#274582"];
    var objWidth = document.getElementById('circleChart').offsetWidth;

    var cwidth = objWidth ;
    var xc = cwidth / 2 ;
    var xy = (cwidth / 2 ) - 5 ;
    var r = xc + 20 ;
    xc = xc- 20;
    var ty = 25;

    var svgContainer = d3.select(element[0]).append("svg").data(jsonData);
    svgContainer.attr("width", cwidth).attr("height", cwidth);

    for(var i =0;i<jsonData.length;i++){

        var r = r - 30;
        var circle = svgContainer.append("g");
        circle.append("circle").attr("cx", xc).attr("cy", xy).attr("r", r).attr("fill", color[i]);
        circle.append('text').attr('x', xc)
        .attr('y', ty).text(jsonData[i].name)
        .attr("fill","#fff")
        .attr("style","transform: translateX(-20px)")
        .attr("class","labelName");
        ty+=31;

    }


  });

我的json文件数据是

[ { "name":"Category 1", "count":"20" }, 
  { "name":"Category 2", "count":"40" },
  { "name":"Category 3", "count":"52" } ]

我试图按以下方式制作

Answer 1

您应该将jsonData传递给data()函数

var circleContainer = svgSelection.selectAll("g")
  .data(jsonData)
  .enter()
  .append("g");

然后使用此容器操作：

circleContainer.append('circle')
  .attr('cx', 100)
  .attr('cy', 100)
  .attr('r', function(d) {return d.count+'px'})
  .style('fill', 'none').style('stroke', 'black');

这里是fiddle