弹簧马男爵-CSDN博客

原创 d3ForceEasy —— 一个封装D3js force力导向图简单使用的轮子

d3ForceEasy< 一个封装D3js force力导向图简单使用的轮子>github地址->内有示例代码依赖d3.js >v4.0.0示例代码在test文件中使用方法1.npm install d3_force_easy --save2.引入配置和数据import d3ForceEasy from 'd3_force_easy'import 'd3ForceEasy.css'...//基础配置const option = {

2021-02-19 13:56:44 636

原创 d3.js实现力导向图圈选框选

d3.js实现力导向图圈选框选今天给大家带来的是如何在2D可视化图形中加入通过鼠标拖动圈选功能，以力导向图为例。最终效果代码解析我们是要在节点的上方绘制一个矩形覆盖节点的视觉效果，但是为了和原来的节点拖动不冲突，就需要对事件的target做判断。当鼠标在空白区域时才能圈选。还不明白的话，返回电脑桌面试一下拖动鼠标。首先还是先画一个力导向图数据var

2018-01-26 10:16:24 3497

原创 D3.js中国地图下钻

使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中，地图是很重要的一个环节，很多时候需要展现的不仅是国家地图，还需要能从国家进入到省市，看到区这样的下钻过程，今天我们就来实现这个效果。因为地图数据过于庞大，例子中删除了除北京外其他的地市信息。所以，请点击北京查看效果，其他省没效果。最终效果点击北京市查看效果，其他区域切换效果，空白区域返回全国。代码解析首先准备地图json数据这里

2017-10-13 15:39:45 2242

原创 D3.js地图打点射线动效（结合snap.js）

D3.js地图打点射线动效在项目中，通常使用打点和射线来实现区域的攻防、传达、运动等需求，最终效果代码解析首先引入d3V3和snap导入地图数据{"type":"FeatureCollection", "bbox": [ -180.0, -89.99893, 180.0, 83.59961 ], "features":[{"type":"Feature","properties":{

2017-09-28 11:00:45 3044

原创 D3.js绘制实时映射的缩略图

在做可视化的很多时候，我们需要在主图的一角设置一个缩略图来掌握全局情况。本次将使用力导向图作为例子，完成缩略图的实现。绘制的原理就是依靠主图的数据再画一个图出来，无需再次计算，只改变图形形态。最终效果主图节点拖动，缩略图跟着变化。代码解析数据依然使用之前例子的力导向图绘制数据及方法var nodes = [ {value:"66666666",type:"home",index:"0"

2017-09-27 10:32:19 2812

原创 D3力导向图及树状布局变换

D3力导向图及树状布局变换d3的力导向图是表现关系型数据比较方便且直观的方法，但是会遇到节点比较多且层级关系混乱的情况，这时树状布局就比较方便了，如何不破坏原来结构以最小的代价变换树状布局呢？下面将为大家介绍。最终效果代码解析首先我们需要准备关系型数据，数据包括节点数据nodes和连线关系数据links，links的source和target分别表示源和目标的index。var nodes = [

2017-09-25 11:57:42 7121 1

原创 web可视化学习----tween.js前端动画库

web可视化学习—-tween.js前端动画库tween.js是一个强大的js动画库特点：性能：基于底层高效率的方法; 精度：简单的完成复杂动画的实现; 帧率：帧平滑意味着页面上可大量符合流媒体; JQuery:依赖jQuery的易用性; 简单使用：简单的快速使用;1.开始使用tween.js$( element ).tween( { property : options } );optio

2016-01-20 11:12:25 3693

Bill的博客