如何制作泡泡旋转木马？

Question

在这个谷歌开源项目页面上，你会看到一个泡泡旋转木马。中心有一个大气泡，大气泡周围有很多小气泡。有左右箭头可以点击，它会在一个小气泡中生成一个大气泡。如果你只是不管它，它会一次将小气泡变成大气泡。

此类转盘是否有技术名称？

这需要什么框架？如何创建这样的？

创建类似内容的任何教程或分步指南？

https://opensource.google.com/projects/explore/featured

Answer 1

您可以使用 D3 (Data-Driven Documents or D3.js) 。 D3是一个JavaScript库，用于使用Web标准可视化数据。

访问D3 gallery，其中包含气泡图的许多示例。

您可以查看部分符合要求的simple demo example

$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
    supportResponsive: true,
    //container: => use @default
    size: 600,
    //viewBoxSize: => use @default
    innerRadius: 600 / 3.5,
    //outerRadius: => use @default
    radiusMin: 50,
    //radiusMax: use @default
    //intersectDelta: use @default
    //intersectInc: use @default
    //circleColor: use @default
    data: {
      items: [
        {text: "Java", count: "236"},
        {text: ".Net", count: "382"},
        {text: "Php", count: "170"},
        {text: "Ruby", count: "123"},
        {text: "D", count: "12"},
        {text: "Python", count: "170"},
        {text: "C/C++", count: "382"},
        {text: "Pascal", count: "10"},
        {text: "Something", count: "170"},
      ],
      eval: function (item) {return item.count;},
      classed: function (item) {return item.text.split(" ").join("");}
    },
    plugins: [
      {
        name: "central-click",
        options: {
          text: "(See more detail)",
          style: {
            "font-size": "12px",
            "font-style": "italic",
            "font-family": "Source Sans Pro, sans-serif",
            //"font-weight": "700",
            "text-anchor": "middle",
            "fill": "white"
          },
          attr: {dy: "65px"},
          centralClick: function() {
            alert("Here is more details!!");
          }
        }
      },
      {
        name: "lines",
        options: {
          format: [
            {// Line #0
              textField: "count",
              classed: {count: true},
              style: {
                "font-size": "28px",
                "font-family": "Source Sans Pro, sans-serif",
                "text-anchor": "middle",
                fill: "white"
              },
              attr: {
                dy: "0px",
                x: function (d) {return d.cx;},
                y: function (d) {return d.cy;}
              }
            },
            {// Line #1
              textField: "text",
              classed: {text: true},
              style: {
                "font-size": "14px",
                "font-family": "Source Sans Pro, sans-serif",
                "text-anchor": "middle",
                fill: "white"
              },
              attr: {
                dy: "20px",
                x: function (d) {return d.cx;},
                y: function (d) {return d.cy;}
              }
            }
          ],
          centralFormat: [
            {// Line #0
              style: {"font-size": "50px"},
              attr: {}
            },
            {// Line #1
              style: {"font-size": "30px"},
              attr: {dy: "40px"}
            }
          ]
        }
      }]
  });
  });

.bubbleChart {
      min-width: 100px;
      max-width: 700px;
      height: 700px;
      margin: 0 auto;
    }
    .bubbleChart svg{
      background: #000000;
    }
    
body{
background: #000000;
}

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script>  
  <script src="https://phuonghuynh.github.io/js/bower_components/d3/d3.min.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js" type="application/javascript"></script>
 
<div class="bubbleChart"/>

和source code is here