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

我需要使用等间距放置的堆叠圆来显示数据。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;

    }


  });

我试着做如下的事情

---

您应该将

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');

---

这是给你的

谢谢。。如何添加表示线的多段线？我的意思是像在图像中。。并不是所有的圈子外的人都会为你更新<代码>数学。sqrt（2）*（r+r*i）/2是到右下角最近点的位置（公式

cos（π/4）=x/r

）

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