d3js实现动态百分比文字气泡标签云效果代码-html代码-BFW代码库

d3js实现动态百分比文字气泡标签云效果代码

代码语言：html

所属分类：其他

代码描述：d3js实现动态百分比文字气泡标签云效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.js"></script>

    <style>
        body {
            font-family: "avenir next", Arial, sans-serif;
            font-size: 12px;
            margin: 0;
            background: #0f1231;
        }

        #bubble-box {
            width: 400px;
            height: 400px;
            position: relative;
            /*border: 1px solid #DD5246;*/
            margin-left: 100px;
            margin-top: 100px;
        }

        circle {
            position: relative;
        }

        @keyframes idle {
            from, to {
                transform: translate(0, 3%);
            }

            25% {
                transform: translate(-3%, 0);
            }

            50% {
                transform: translate(0, -3%);
            }

            75% {
                transform: translate(3%, 0);
            }
        }

        .bubble1 {
            animation: idle 4s linear infinite;
        }
    </style>
</head>

<body>
    <div id="bubble-box"></div>
    <script>
        function bubbleChart() {
            const width = 400;
            const height = 400;
            const centre = { x: width/2, y: height/2 };
            //该参数表示气泡出来时候的引力大小，也就是控制快慢的，可以根据宽高具体调整
            const forceStrength = 0.02;

            // these wi.........完整代码请登录后点击上方下载按钮下载查看