d3 - dougnut пузырь круговая диаграмма

Я пытаюсь создать слиты пирог/пузырьковая диаграмма.

- ищет начальную базу данных пузырьковой диаграммы - возможно, этот. http://jsfiddle.net/xsafy/

^необходимо сгруппировать эти пузыри - возможно, суб пузырьки на ломтик.

// пузырчатая диаграмма основа. 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(); 

    }; 

    })();

// кольцевая диаграмма базы. , полученных из этих примеров. http://bl.ocks.org/dbuezas/9306799 https://bl.ocks.org/mbostock/1346410

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

    };

источник

2016-08-25 The Old County

возможно использовать это в качестве основы - http://vallandingham.me/bubble_charts_in_d3.html –

_-- У меня возникают проблемы с обновлением/анимацией пузырей http://jsfiddle.net/bezkccr5/ –

^как я могу его масштабировать вверх и вниз, - и угасать их в/из существования, если необходимость be - –

Это так близко, у меня до сих пор .. Я слил две диаграммы вместе, как, например, - хотя есть ошибка все еще пытается обновить пузыри - по крайней мере, получить их для масштабирования/морфинга/перемещения/анимации. В идеале я хочу, чтобы они держались близко к их сегментам групп.

вот скрипка. https://jsfiddle.net/tk5xog0g/1/

<!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>

источник

2016-08-26 01:10:34

--- У меня есть анимация пузырей, но все еще не так. https://jsfiddle.net/tk5xog0g/2/ –

https://jsfiddle.net/tk5xog0g/5/ - пузырьки пересекаться - они должны двигаться, чтобы избежать столкновения –

пузырьков = bubbles.transition() \t \t \t \t \t \t \t .transition() \t \t \t \t \t \t \t .duration (2000) \t \t \t \t \t \t \t.Attr ('преобразования', функция (d) { \t \t \t \t \t \t возвращения 'перевести (' + де + '' + д + ')'; \t \t \t \t \t \t}) \t \t \t \t \t \t \t .attr ('г', функция (г) {\t \t \t \t \t \t \t //console.log("dr», д-р) \t \t \t \t \t \t возвращение d.r; \t \t \t \t \t \t}) \t \t \t \t \t \t \t .ease ('синуса') –

Я думал, что я буду стараться и первый участок средней точки роста на дугах - и, возможно, от ТЕХ - начать, чтобы получить партию зоны координат освоить управление цветные пузыри ,

Я пытался следовать этому - How to get coordinates of slices along the edge of a pie chart?

https://jsfiddle.net/tk5xog0g/28/

/*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*/

источник

2016-08-27 12:28:15

d3 - dougnut пузырь круговая диаграмма

ответ

Смежные вопросы