Javascript d3-dougnut气泡饼图

我正在尝试创建一个合并的饼图/气泡图

--寻找一个开始的气泡图基地-也许这一个。

^需要聚集这些气泡-可能每个切片都有子气泡

//气泡图基础。

//甜甜圈图表库。 从这些例子中得出。

---

这是我到目前为止所能接近的。。我已经将这两个图表合并在一起了——尽管仍有一个bug试图更新气泡——至少让它们缩放/变形/移动/动画。理想情况下，我希望他们能紧跟自己的团队

这是小提琴。

道格比
随机化
//__调用饼图
$（'[data role=“doughpie”]'）。每个（函数（索引）{
创造甜甜圈（这个）；
});
函数bubbledata（数据）{
//循环遍历数据--并合并子项
var childs=[]；
$.each（数据、函数（索引、值）{
childs.push（value.childs）；
});
var merged=[].concat.apply（[]，childs）；//flatterns多维数组
return$.extend（true，{}，{“children”：merged}）；//返回deep clone
}
函数createDoughnut（el）{
变量宽度=$（el）.data（“宽度”），
高度=$（el）.数据（“高度”），
半径=数学最小值（宽度、高度）/2；
var svg=d3。选择（$（el）[0]）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
//_创建DoughpieShell
var doughpie=svg.append（“g”）
.attr（“类”、“doughpie”）；
doughpie.append（“g”）
.attr（“类”、“切片”）；
doughpie.append（“g”）
.attr（“类别”、“标签”）；
doughpie.append（“g”）
.attr（“类别”、“行”）；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var arc=d3.svg.arc（）
.外表面（半径*0.85）
.内半径（半径*0.83）；
var outerArc=d3.svg.arc（）
.内半径（半径*0.9）
.外层（半径*0.9）；
attr（“变换”、“平移”（“+width/2+”，“+height/2+”））；
变量键=函数（d）{
返回d.data.label；
};
var color=d3.scale.ordinal（）
.范围（[“#46a2de”、“#7b3cce”、“#31d99c”、“#de5942”、“#ffa618”]）；
//_创建DoughpieShell
//_制造泡沫
var diameter=width/2；//取一半/width
var bubs=svg.append（“g”）
.attr（“类别”、“基本类”）；
属性（“转换”、“平移”（“+diameter/2+”，“+diameter/2+”））；
var bubble=d3.layout.pack（）
.尺寸（[直径，直径]）
.价值（功能（d）{
返回d.size；
})
.填充（3）；
//_制造泡沫
函数randomData（）{
变量数据1=[{
“标签”：“AA”，
“值”：0.911035425558026，
“儿童”：[
{
名称：“一些文字aa”，
组别:"AA",，
尺码：120
}
]
}, {
“标签”：“BB”，
“值”：0.08175111844879179，
“儿童”：[
{
名称：“一些文本bb”，
小组：“BB”，
尺码：123
}
]
}, {
“标签”：“抄送”，
“值”：0.2526243957273275，
“儿童”：[
{
名称：“一些文本抄送”，
小组:"抄送",，
尺码：193
}
]
}, {
“标签”：“DD”，
“值”：0.8301366989535612，
“儿童”：[
{
名称：“一些文本dd”，
小组：“DD”，
尺码：29
},
{
名称：“一些文本dd”，
小组：“DD”，
尺码：289
}
]
}, {
“标签”：“EE”，
“价值”：0.0517762265780517，
“儿童”：[
{
名称：“一些文本ee”，
小组：“EE”，
尺码：389
},
{
名称：“一些文本ee”，
小组：“EE”，
尺码：89
}
(function() {

    var diameter = 250;

    var svg = d3.select('#graph').append('svg')
      .attr('width', diameter)
      .attr('height', diameter);

    var bubble = d3.layout.pack()
      .size([diameter, diameter])
      .value(function(d) {
        return d.size;
      })
      .padding(3);

    var color = d3.scale.ordinal()
      .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"])
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);


  function randomData() {

      var data1 = {
        "children": [
                {
                  name: "AA",
                  className: "aa",
                  size: 170
                },
                {
                  name: "BB",
                  className: "bb",
                  size: 393
                },
                {
                  name: "CC",
                  className: "cc",
                  size: 293
                },
                {
                  name: "DD",
                  className: "dd",
                  size: 89
                }
              ]
      };

      var data2 = {
        "children": [
                {
                  name: "AA",
                  className: "aa",
                  size: 120
                },
                {
                  name: "BB",
                  className: "bb",
                  size: 123
                },
                {
                  name: "CC",
                  className: "cc",
                  size: 193
                },
                {
                  name: "DD",
                  className: "dd",
                  size: 289
                }
              ]
      };



          var j = Math.floor((Math.random() * 2) + 1);
          console.log("j", j);

          if (j == 1) {
            return data1;
          } else {
            return data2;
          }

        }

  change(randomData());

  d3.select(".randomize")
    .on("click", function() {
      change(randomData());
    });

  function change(data) {
    console.log("data", data);

    // generate data with calculated layout values
    var nodes = bubble.nodes(data)
      .filter(function(d) {
         return !d.children;
      }); // filter out the outer bubble


    var vis = svg.selectAll('circle')
      .data(nodes);

    vis.enter()
      .insert("circle")
      .attr('transform', function(d) {
        return 'translate(' + d.x + ',' + d.y + ')';
      })
      .attr('r', function(d) {
        return d.r;
      })
      .style("fill", function(d) {
        return color(d.name);
      })
      .attr('class', function(d) {
        return d.className;
      });

    vis
      .transition().duration(1000)

    vis.exit()
      .remove();

  };

  })();

  var svg = d3.select("#graph")
    .append("svg")
    .append("g")

  svg.append("g")
    .attr("class", "slices");
  svg.append("g")
    .attr("class", "labels");
  svg.append("g")
    .attr("class", "lines");

  var width = 560,
    height = 450,
    radius = Math.min(width, height) / 2;

  var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
      return d.value;
    });

  var arc = d3.svg.arc()
    .outerRadius(radius * 0.85)
    .innerRadius(radius * 0.83);

  var outerArc = d3.svg.arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9);

  svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var key = function(d) {
    return d.data.label;
  };

  var color = d3.scale.ordinal()
    .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"])
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

  function randomData() {

    var data1 = [{
      "label": "AA",
      "value": 0.911035425558026
    }, {
      "label": "BB",
      "value": 0.08175111844879179
    }, {
      "label": "CC",
      "value": 0.25262439557273275
    }, {
      "label": "DD",
      "value": 0.8301366989535612
    }, {
      "label": "EE",
      "value": 0.0517762265780517
    }];

    var data2 = [{
      "label": "AA",
      "value": 0.243879179
    }, {
      "label": "BB",
      "value": 0.243879179
    }, {
      "label": "CC",
      "value": 0.2342439557273275
    }, {
      "label": "DD",
      "value": 0.2349535612
    }, {
      "label": "EE",
      "value": 0.2345780517
    }];

    var j = Math.floor((Math.random() * 2) + 1);

    if (j == 1) {
      return data1;
    } else {
      return data2;
    }

  }


  change(randomData());

  d3.select(".randomize")
    .on("click", function() {
      change(randomData());
    });


  function change(data) {

    /* ------- PIE SLICES -------*/
    var slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(data), key);

    slice.enter()
      .insert("path")
      .style("fill", function(d) {
        return color(d.data.label);
      })
      .attr("class", "slice");

    slice
      .transition().duration(1000)
      .attrTween("d", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
          return arc(interpolate(t));
        };
      })

    slice.exit()
      .remove();

  };

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>doughpie</title>
        <link rel="stylesheet" href="css/generic.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>

    <body>
        <button class="randomize">randomize</button>
        <div data-role="doughpie" data-width="450" data-height="450" id="graph"></div>

        <script>
            //__invoke pie chart
            $('[data-role="doughpie"]').each(function(index) {
                createDoughnut(this);
            });


            function bubbledata(data){
                //loop through data -- and MERGE children
                var childs = [];
                $.each(data, function( index, value ) {
                    childs.push(value.children);                    
                });
                var merged = [].concat.apply([], childs);//flatterns multidimensional array

                return $.extend(true, {}, {"children": merged});// return deep clone
            }


            function createDoughnut(el){

                  var width = $(el).data("width"),
                    height = $(el).data("height"),
                    radius = Math.min(width, height) / 2;

                  var svg = d3.select($(el)[0])
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)



                  //_create doughpie shell
                      var doughpie = svg.append("g")
                            .attr("class", "doughpie");

                      doughpie.append("g")
                        .attr("class", "slices");
                      doughpie.append("g")
                        .attr("class", "labels");
                      doughpie.append("g")
                        .attr("class", "lines");


                      var pie = d3.layout.pie()
                        .sort(null)
                        .value(function(d) {
                          return d.value;
                        });

                      var arc = d3.svg.arc()
                        .outerRadius(radius * 0.85)
                        .innerRadius(radius * 0.83);

                      var outerArc = d3.svg.arc()
                        .innerRadius(radius * 0.9)
                        .outerRadius(radius * 0.9);

                      doughpie.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

                      var key = function(d) {
                        return d.data.label;
                      };

                      var color = d3.scale.ordinal()
                        .range(["#46a2de", "#7b3cce", "#31d99c", "#de5942", "#ffa618"]);
                  //_create doughpie shell


                  //_create bubble
                    var diameter = width/2;//take half/width

                    var bubs = svg.append("g")
                            .attr("class", "bubs");

                    bubs.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

                    var bubble = d3.layout.pack()
                      .size([diameter, diameter])
                      .value(function(d) {
                        return d.size;
                      })
                      .padding(3);

                  //_create bubble



                  function randomData() {
                    var data1 = [{
                        "label": "AA",
                        "value": 0.911035425558026,
                        "children": [
                            {
                                name: "some text aa",
                                group: "AA",
                                size: 120
                            }
                        ]
                    }, {
                        "label": "BB",
                        "value": 0.08175111844879179,
                        "children": [
                            {
                                name: "some text bb",
                                group: "BB",
                                size: 123
                            }
                        ]
                    }, {
                        "label": "CC",
                        "value": 0.25262439557273275,
                        "children": [
                            {
                                name: "some text cc",
                                group: "CC",
                                size: 193
                            }
                        ]
                    }, {
                        "label": "DD",
                        "value": 0.8301366989535612,
                        "children": [
                            {
                                name: "some text dd",
                                group: "DD",
                                size: 29
                            },
                            {
                                name: "some text dd",
                                group: "DD",
                                size: 289
                            }
                        ]
                    }, {
                        "label": "EE",
                        "value": 0.0517762265780517,
                        "children": [
                            {
                                name: "some text ee",
                                group: "EE",
                                size: 389
                            },
                            {
                                name: "some text ee",
                                group: "EE",
                                size: 89
                            }
                        ]
                    }];

                    var data2 = [{
                        "label": "AA",
                        "value": 0.243879179,
                        "children": [
                            {
                                name: "some text aa",
                                group: "AA",
                                size: 120
                            }
                        ]
                    }, {
                        "label": "BB",
                        "value": 0.243879179,
                        "children": [
                            {
                                name: "some text bb",
                                group: "BB",
                                size: 123
                            }
                        ]
                    }, {
                        "label": "CC",
                        "value": 0.2342439557273275,
                        "children": [
                            {
                                name: "some text cc",
                                group: "CC",
                                size: 193
                            }
                        ]
                    }, {
                        "label": "DD",
                        "value": 0.2349535612,
                        "children": [
                            {
                                name: "some text dd",
                                group: "DD",
                                size: 29
                            },
                            {
                                name: "some text dd",
                                group: "DD",
                                size: 289
                            }
                        ]
                    }, {
                        "label": "EE",
                        "value": 0.2345780517,
                        "children": [
                            {
                                name: "some text ee",
                                group: "EE",
                                size: 389
                            },
                            {
                                name: "some text ee",
                                group: "EE",
                                size: 89
                            }
                        ]
                    }];

                    var j = Math.floor((Math.random() * 2) + 1);

                    if (j == 1) {
                      return data1;
                    } else {
                      return data2;
                    }
                  }


                  change(randomData());

                  d3.select(".randomize")
                    .on("click", function() {
                      change(randomData());
                    });

                  function change(data) {


                    /* ------- ANIMATE PIE SLICES -------*/
                    var slice = doughpie.select(".slices").selectAll("path.slice")
                      .data(pie(data), key);

                    slice.enter()
                      .insert("path")
                      .style("fill", function(d) {
                        return color(d.data.label);
                      })
                      .style("transform", function(d, i){
                        //return "translate(0, 0)";
                      })
                      .attr("class", "slice");

                    slice
                      .transition().duration(1000)
                      .attrTween("d", function(d) {
                        this._current = this._current || d;
                        var interpolate = d3.interpolate(this._current, d);
                        this._current = interpolate(0);
                        return function(t) {
                          return arc(interpolate(t));
                        };
                      })

                    slice.exit()
                      .remove();
                    /* ------- ANIMATE PIE SLICES -------*/


                    /* ------- ANIMATE BUBBLES -------*/


                       // generate data with calculated layout values

                        var data = bubbledata(data);

                        var nodes = bubble.nodes(data)
                          .filter(function(d) {
                             return !d.children;
                          }); // filter out the outer bubble


                        var bubbles = bubs.selectAll('circle')
                          .data(nodes);

                        bubbles.enter()
                          .insert("circle")
                          .attr('transform', function(d) {
                            return 'translate(' + d.x + ',' + d.y + ')';
                          })
                          .attr('r', function(d) {
                            return d.r;
                          })
                          .style("fill", function(d) {
                            return color(d.group);
                          });

                        bubbles
                          .transition().duration(1000)

                        bubbles.exit()
                          .remove();

                        /* ------- ANIMATE BUBBLES -------*/

                  };
            }
        </script>
    </body>
</html>

/*placing mid dots*/    
 var midDotsArrayCooridnates = [];

 slice
   .each(function(d) {
     x = 0 + (radius * 0.85) * Math.cos(d.startAngle);
     y = 0 + (radius * 0.85) * Math.sin(d.startAngle);

     var obj = {
       "x": x,
       "y": y
     }
     midDotsArrayCooridnates.push(obj);
   });

 $.each(midDotsArrayCooridnates, function(index, value) {
   var dot = doughpie.select(".slicedots").append('circle')
     .attr('cx', value.x)
     .attr('cy', value.y)
     .attr('r', 5)
     .style("fill", "red")
     .attr('class', "ccc")
 });

 /*placing mid dots*/