Ich versuche, ein zusammengeführtes Kreis- / Blasendiagramm zu erstellen.

- auf der Suche nach einer Basis für ein Start-Blasendiagramm - vielleicht dieses.http: //jsfiddle.net/xsafy

^ Diese Blasen müssen gebündelt werden - möglicherweise unter Blasen pro Scheibe.

// Blasendiagrammbasis.http: //jsfiddle.net/NYEaX/1450

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

  };

  })();

// Donut Chart Basis. abgeleitet von diesen Beispielen.http: //bl.ocks.org/dbuezas/930679 https: //bl.ocks.org/mbostock/134641

http: //jsfiddle.net/NYEaX/1452

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

  };