D3.js v5.0 气泡图

最新推荐文章于 2023-09-03 06:28:59 发布
最新推荐文章于 2023-09-03 06:28:59 发布
阅读量2k 收藏 3
点赞数 1
分类专栏： D3.js
本文详细介绍了如何使用D3.js v5.0库创建动态气泡图，包括数据绑定、坐标映射、形状绘制、颜色分配及交互功能的实现，适合数据可视化初学者及进阶者参考。
摘要由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述

{
  "name": "bubble",
  "children": [
    {
      "name": "Atlas",
      "description": "Atlas of Global Agriculture",
      "children": [
        {
          "name": "",
          "address": "",
          "note": ""
        },
      ]
    },
  ]
}

/* eslint-disable no-param-reassign */
import * as d3 from 'd3';

export default function bubbleChart(id, dataset) {

  /** 宽 */
  let w = window.innerWidth * 0.68 * 0.95;
  /** 高 */
  let h = Math.ceil(w);
  /** 半径 */
  let oR = 0;
  /** dataset的大气泡数 */
  let nTop = 0;

  const colVals = d3.scaleOrdinal(d3.schemeCategory10);

  const svgContainer = d3.select('#mainBubble').style('height', `${h}px`);

  const svg = d3
    .select(id)
    .append('svg')
    .attr('class', 'mainBubbleSVG')
    .attr('width', w)
    .attr('height', h)
    .on('mouseleave', function() {
      return resetBubbles();
    });
  // 添加大气泡
  const bubbleObj = svg
    .selectAll('.topBubble')
    .data(dataset.children)
    .enter()
    .append('g')
    .attr('id', (d, i) => {
      return `topBubbleAndText_${i}`;
    });
  nTop = dataset.children.length;
  oR = w / (1 + 3 * nTop);
  h = Math.ceil((w / nTop) * 2);
  svgContainer.style('height', `${h}px`);

  bubbleObj
    .append('circle')
    .attr('class', 'topBubble')
    .attr('id', (d, i) => {
      return `topBubble${i}`;
    })
    .attr('r', () => {
      return oR;
    })
    .attr('cx', (d, i) => {
      return oR * (3 * (1 + i) - 1);
    })
    .attr('cy', (h + oR) / 3)
    .style('fill', (d, i) => {
      return colVals(i);
    })
    .style('opacity', 0.3)
    .on('mouseover', (d, i) => {
      return activateBubble(d, i);
    });
  // 气泡中的文字
  bubbleObj
    .append('text')
    .attr('class', 'topBubbleText')
    .style('fill', (d, i) => {
      return colVals(i);
    })
    .attr('x', (d, i) => {
      return oR * (3 * (1 + i) - 1);
    })
    .attr('y', (h + oR) / 3)
    .attr('font-size', 12)
    .attr('text-anchor', 'middle')
    .text(d => d.name);

  // 添加子气泡
  dataset.children.map((value, index) => {
    return renderChildBubble(value.children, index);
  });
  function renderChildBubble(value, index) {
    const childBubbleObj = svg
      .selectAll('.childBubble')
      .data(value)
      .enter()
      .append('g');
    childBubbleObj
      .append('circle')
      .attr('class', `childBubble${index}`)
      .attr('r', () => {
        return oR / 3;
      })
      .attr('cx', (d, i) => {
        return oR * (3 * (index + 1) - 1) + oR * 1.5 * Math.cos((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('cy', (d, i) => {
        return (h + oR) / 3 + oR * 1.5 * Math.sin((((i - 1) * 45) / 180) * 3.1415926);
      })
      .style('opacity', 0.5)
      .style('fill', colVals(index));
    childBubbleObj
      .append('text')
      .attr('class', `childBubbleText${index}`)
      .attr('x', function(d, i) {
        return oR * (3 * (index + 1) - 1) + oR * 1.5 * Math.cos((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('y', function(d, i) {
        return (h + oR) / 3 + oR * 1.5 * Math.sin((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('text-anchor', 'middle')
      .attr('font-size', 6)
      .style('opacity', 0.5)
      .text(d => d.name);
  }

  function activateBubble(d, i) {
    const t = svg.transition().duration(d3.event.altKey ? 7500 : 350);
    t.selectAll('.topBubble')
      .attr('cx', (_, ii) => {
        if (i === ii) {
          // Nothing to change
          return oR * (3 * (1 + ii) - 1) - 0.6 * oR * (ii - 1);
        } else {
          // Push away a little bit
          if (ii < i) {
            // left side
            return oR * 0.6 * (3 * (1 + ii) - 1);
          }
          // right side
          return oR * (nTop * 3 + 1) - oR * 0.6 * (3 * (nTop - ii) - 1);
        }
      })
      .attr('r', (_, ii) => {
        if (i === ii) return oR * 1.8;
        return oR * 0.8;
      });

    t.selectAll('.topBubbleText')
      .attr('x', (_, ii) => {
        if (i === ii) {
          // Nothing to change
          return oR * (3 * (1 + ii) - 1) - 0.6 * oR * (ii - 1);
        } else {
          // Push away a little bit
          if (ii < i) {
            // left side
            return oR * 0.6 * (3 * (1 + ii) - 1);
          }
          // right side
          return oR * (nTop * 3 + 1) - oR * 0.6 * (3 * (nTop - ii) - 1);
        }
      })
      .attr('font-size', (_, ii) => {
        if (i === ii) return 30;
        return 12 * 0.8;
      });

    let signSide = -1;
    for (let k = 0; k < nTop; k += 1) {
      signSide = 1;
      mapBubble(t, k, i, signSide);
    }
  }
  function mapBubble(t, k, a, signSide) {
    if (k < nTop / 2) {
      signSide = 1;
    }
    t.selectAll(`.childBubbleText${k}`)
      .attr('x', (d, i) => {
        return (
          oR * (3 * (k + 1) - 1) -
          0.6 * oR * (k - 1) +
          signSide * oR * 2.5 * Math.cos((((i - 1) * 45) / 180) * 3.1415926)
        );
      })
      .attr('y', (d, i) => {
        return (h + oR) / 3 + signSide * oR * 2.5 * Math.sin((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('font-size', () => {
        return k === a ? 12 : 6;
      })
      .style('opacity', () => {
        return k === a ? 1 : 0;
      });

    t.selectAll(`.childBubble${k}`)
      .attr('cx', (d, i) => {
        return (
          oR * (3 * (k + 1) - 1) -
          0.6 * oR * (k - 1) +
          signSide * oR * 2.5 * Math.cos((((i - 1) * 45) / 180) * 3.1415926)
        );
      })
      .attr('cy', (d, i) => {
        return (h + oR) / 3 + signSide * oR * 2.5 * Math.sin((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('r', () => {
        return k === a ? oR * 0.55 : oR / 3.0;
      })
      .style('opacity', function() {
        return k === a ? 1 : 0;
      });
  }
  function resetBubbles() {
    w = window.innerWidth * 0.68 * 0.95;
    oR = w / (1 + 3 * nTop);

    h = Math.ceil((w / nTop) * 2);
    svgContainer.style('height', `${h}px`);

    svg.attr('width', w);
    svg.attr('height', h);

    const t = svg.transition().duration(650);

    t.selectAll('.topBubble')
      .attr('r', () => {
        return oR;
      })
      .attr('cx', (d, i) => {
        return oR * (3 * (1 + i) - 1);
      })
      .attr('cy', (h + oR) / 3);

    t.selectAll('.topBubbleText')
      .attr('font-size', 12)
      .attr('x', function(d, i) {
        return oR * (3 * (1 + i) - 1);
      })
      .attr('y', (h + oR) / 3);

    for (let k = 0; k < nTop; k += 1) {
      restmapBubble(t, k);
    }
  }
  function restmapBubble(t, k) {
    t.selectAll(`.childBubbleText${k}`)
      .attr('x', function(d, i) {
        return oR * (3 * (k + 1) - 1) + oR * 1.5 * Math.cos((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('y', function(d, i) {
        return (h + oR) / 3 + oR * 1.5 * Math.sin((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('font-size', 6)
      .style('opacity', 0.5);

    t.selectAll(`.childBubble${k}`)
      .attr('r', () => {
        return oR / 3.0;
      })
      .style('opacity', 0.5)
      .attr('cx', (d, i) => {
        return oR * (3 * (k + 1) - 1) + oR * 1.5 * Math.cos((((i - 1) * 45) / 180) * 3.1415926);
      })
      .attr('cy', (d, i) => {
        return (h + oR) / 3 + oR * 1.5 * Math.sin((((i - 1) * 45) / 180) * 3.1415926);
      });
  }
}
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
使用D3.js的简单气泡图
04-03 820
在我的工作，我被分配到可视化的一些数据的任务。 这是当我碰上D3.js ，一个JavaScript库，用于操纵在交互方式基于数据文件。 它利用HTML5，JavaScript的，SVG和CSS3的。 在本教程中，我们将使用D3，以可视化abubble图表的形式，我们的数据。 在开始之前，下载D3源。 创建X和Y轴 让我们先来绘制使用D3一些轴。 在开始之前，我们需要SVG在我们的HTML页...
简单的d3.js实现气泡图
weixin_44900383的博客
07-17 790
【代码】简单的d3.js实现气泡图。
d3.js绘制气泡图[密集型、分散型]
zhouyonggo的专栏
09-12 361
实现如下效果： 一、json数据： { "data": [ [{ "name": "GO:0051560", "x": 0.5, "y": 9.8563728170021, "size": 5, "desc": "mitochondrial calcium ion homeostasis" }, {
java 气泡图_D3.js实现散点图和气泡图的方法详解
weixin_30110807的博客
02-25 524
前言小编之前已经跟大家分享过了《D3.js实现柱状图的方法详解》和《D3.js实现折线图的方法详解》这两篇文章，已经介绍过柱状图和折线图了。下面就来说说和这两种非常相似的图表——散点图和气泡图。有需要的朋友们可以参考学习。散点图和气泡图的实现还是和之前一样，我们先把简单的画图框架搭起来，添加SVG画布：散点图和气泡图.container {margin: 30px auto;width: 600p...
d3.js气泡图大数据展示
alantuling_jt的博客
03-28 9790
d3.js气泡图大数据展示先上效果图： 根据数据大小显示圆的大小。 这个是方法： function initCircle(data){ d3.select("svg").selectAll("g").remove();//清空作图区域 var svg = d3.select("svg"), width = +svg.attr("wid
Echarts图简单开发
Corp_Marcheon的博客
11-10 629
听同事说Echarts这个东西要去做数据统计，动态图蛮好用的，就简单研究一下： Echarts兼容性：IE6/7/8/9/10/11，chrome，firefox，Safari等； Echarts使用时直接引入一个js文件就可以了； Echarts（折线图 、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图）等12类图表； Echarts（标题，详
前端数据可视化插件大盘点 图表/图谱/地图/关系图全有
hebeind100的博客
01-11 4269
在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展，从传统只能依靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已经越来越规范成熟。我把前端数据可视化分为了五种： 1.图表 2.图谱 3.地图 4...
微信小程序_文档_08_组件_媒体组件_地图_画布_开放能力
pre_eminent的JAVA学习园地
06-02 1120
audio注意：1.6.0 版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口音频。属性名类型默认值说明idString audio 组件的唯一标识符srcString 要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleanfalse是否显示默认控件posterString 默认控件上的音频封面的图片资源...
一个牛奔的Android开源大全
watertekhqx的博客
01-25 6866
leobert.lan的博客 一起学习目录视图 摘要视图 订阅 聚焦行业最佳实践，BDTC 2016完整议程公布 微信小程序实战项目——点餐系统 程序员11月书讯，评论得书啦 Get IT技能知识库，50个领域一键直达 github上的优秀android开源项目 2015-11-17 16:35 1219人阅读 评论(0) 收藏 举报目录(?)[+]酷
D3.js实现散点图和气泡图的方法详解
10-21
将会给大家介绍了另外两种可视化图表，利用D3.js实现散点图和气泡图，文章通过多个方面介绍的非常详细，下面来一起看看吧。
d3js-- bubble_cloud
11-30
D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。本代码实现的是数据泡泡可以任意移动，根据不同的数据呈现不同的内容
echarts实现相邻气泡图
10-16
echarts实现的气泡图，跟官方气泡图不同的是，气泡图之间不会叠加在一起。跟d3.js的气泡图效果类似。
D3.js 中Bubble Chart详解
wan353694124的专栏
11-28 5510
Bubble Chart 今天来聊一聊美丽浪漫的气泡图~ 气泡图是一种显示三维数据的图表。 每个具有相关数据的三元组（v1，v2，v3）的实体都被绘制成一个气泡，它通过气泡的x，y位置表示了三元组中的两个vi值，而第三个通过它的大小表示。 气泡图可以被认为是散点图的变化，其中数据点被气泡代替。 正如Microsoft Office文档所解释的，“如果数据有三个数据系列，每个数据系列都包含
基于d3.js简单bubble图
极简
05-09 2176
借鉴：Hui-NaN博主的博客 一、效果图 二、html代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="bubble"></div&gt
Chart.js 气泡图
最新发布
shengyin714959的博客
09-03 159
气泡图用于展示三个变量之间的关系。气泡的位置由前两个变量决定，对应的是 X 轴和 Y 轴，第三个参数为气泡的大小。// X 轴对应值x: number,// Y 轴对应值y: number,// 气泡半径，单位为像素r: number泡图的属性为 bubble ，type 描述了图表类型。
使用jQuery和chart.js获取并展示气泡图（续：增加新增数据功能）
gc_2299的博客
10-30 496
Ubuntu下，使用jQuery调用WebAPI向MongoDB中新增气泡图数据
使用jQuery和chart.js获取并展示气泡图
gc_2299的博客
10-24 447
Ubuntu下，使用jQuery调用WebAPI获取MongoDB中存储的气泡图数据，并以气泡图（chart.js)方式展示
D3.js绘制散点图与气泡图教程
"D3.js实现散点图和气泡图的方法详解" 本文将详细介绍如何使用D3.js库来创建散点图和气泡图。D3.js是一个强大的JavaScript库，用于数据驱动的文档操作，它允许开发者将数据绑定到DOM（文档对象模型）上，并应用数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值