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 will be set in createNodes and chart functions
            let svg = null;
            let bubbles = null;
            let labels = null;
            let nodes = [];
            function charge(d) {
                return Math.pow(d.radius, 2.0) * 0.01
            }
            const simulation = d3.forceSimulation()
              .force('charge', d3.forceManyBody().strength(charge))
              // .force('center', d3.forceCenter(centre.x, centre.y))
              .force('x', d3.forceX().strength(forceStrength).x(centre.x))
              .force('y', d3.forceY().strength(forceStrength).y(centre.y))
              .force('collision', d3.forceCollide().radius(d => d.radius + 5));

            // force simulation starts up automatically, which we don't want as there aren't any nodes yet
            simulation.stop();

            // data manipulation function takes raw data from csv and converts it into an array of node objects
            // each node will store data and visualisation values to draw a bubble
            // rawData is expected to be an array of data objects, read in d3.csv
            // function returns the new node array, with a node for each element in the rawData input
            function createNodes(rawData) {
                const maxSize = d3.max(rawData, d => +d.size);
                const radiusScale = d3.scaleSqrt()
                  .domain([0, maxSize])
                  //此参数控制气泡的大小，表示气泡的半径范围
                  .range([0, 50])

                const myNodes = rawData.map(d => ({
                  ...d,
                        radius: radiusScale(+d.size),
                    size: +d.size,
                    x: Math.random() * width,
                y: Math.random() * height
            }))
            return myNodes;
        }

        let chart = function chart(selector, rawData) {
            nodes = createNodes(rawData);
            svg = d3.select(selector)
              .append('svg')
              .attr('width', width)
              .attr('height', height)
            const elements = svg.selectAll('.bubble')
              .data(nodes, d => d.id)
              .enter()
              .append('g')

            //Container for the gradients
            var defs = svg.append("defs");
            var filter = defs.append("filter")
              .attr("id","glow");

            filter.append("feGaussianBlur")
              .attr("class", "blur")
              .attr("stdDeviation","4")
              .attr("filterUnits","userSpaceOnUse")
              .attr("result","coloredBlur");

            var feMerge = filter.append("feMerge");
            feMerge.append("feMergeNode")
              .attr("in","coloredBlur");
            feMerge.append("feMergeNode")
              ..........完整代码请登录后点击上方下载按钮下载查看