先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3": "^5.9.1" 2.Line.vue源码 <template> <div class="d3line" :id="id"> </div> </template> <script>

项目需要画一个类似知识图谱的节点关系图. 一开始用的是echart画的. 根据https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb,成功画出简单的节点关系. 如图: 总结—— [优点]:关系一目了然,可以鼠标悬浮查看相邻节点,其他节点淡化. [缺点]:拖动结果不理想,尤其是数据过多时,一旦拖动一个,整个页面所有的节点都在动,很久都无法停止(可能是我配置方法不对,但是后续没找到解决方法) 于是转而使用d3力导图. 除了基本的节点展示和拖动之外

1. 安装: npm i d3 --save 2. 引入:main.js import * as d3 from "d3"; Vue.prototype.$d3 = d3; window.d3 = d3; //暂时设置为全局变量 3. demo代码:  demo源码参考地址 <template> <div style="width: 100%;height: 100%;"> <svg version="1.1" xm

单页面使用 cnpm install d3 --save-dev 指定版本安装 cnpm install d3@6.3.1 -S <script> import * as d3 from 'd3' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { testD3(){ let test1 = d3.select("#test1

现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: https://ecomfe.github.io/echarts-doc/public/en/index.html 前端框架使用vue,服务器使用express搭建,交互使用axios. 一.引入vue-resource 通过npm下载vue-resource //命令行中输入 npm install

之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成 在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现

先上效果图: 图中柱状图变成纯蓝色是鼠标滑动过的颜色(颜色可改,本人配色能力十分的强,建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)) 1.环境说明 Vue版本:"vue": "^2.5.2" d3版本:"d3": "^5.9.1" 2.Histogram.vue源码 <!-- d3组件:柱状图 属性说明: id:必填,如果同一页面引用多个柱状图,请设置不同的id width:选填,默认600 height:选填,默认6

需求:用户在地图上单击选点,页面获取到具体坐标并返回. 首先比较重要的是Vue中的$nextTick,因为vue是异步更新的,如果是想打开Dialog或者是其他操作dom后才加载地图,使用nextTick可以保证在dom加载之后进行加载. this.$nextTick(() => { this.loadMap(); }) 如果直接加载地图,这时dom还没有全部更新完毕,无法加载. 接下来是初始化容器与加载地图(这里不仅仅是地图,也可以加载其他svg) 此部分为d3.js的应用,绘制矢量图,选定容

var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w = 77; var img_h = 80; var radius = 30; //console.log(width,height) var svg = d3.select("#forceDirected") .append("svg") .attr("wid

项目中想搞定一个流程图,开始使用了阿里的G6,但是G6目前不支持手势,这样就很郁闷了,因为公司的领导都是使用iPad看的,你不支持手势是不行的,后来又想到了百度的echarts,试了试,感觉还不错,手机端也是没问题的,但是用起来不是很好用,每个节点的位置还要自己去设置计算有点麻烦,所以想找个在支持pc和wap并且使用方便的,结果找到了dagre-d3.js,完全满足我的需求啊,就是文档不全,还大多数都是英文.搞完之后觉得有必要记录一下,哈哈哈. 首先避免不了的就是下载,既然是基于d3的肯定是要连

zoom缩放案例 源码:https://github.com/HK-Kevin/d...:demo:https://hk-kevin.github.io/d3...: 原理:通过zoom事件来重新绘制x轴scale,同时获得此时scale,在zoom事件的时候调用函数,将每个数据点的xScale重新绘制一遍. let data = [[{x: , y: }, {x: , y: }, {x: , y: }, {x: , y: }, {x: , y: }, {x: , y: }, {x: ,y: }

前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章请说明出处,谢谢关注! 之前有多篇博文介绍了d3力导向图的绘制过程的一些问题,现在由于性能和UI的要求,要升级d3版本.因为v3版本现在使用的不多了,网上可找的资料不多且拓展性不好,因此花了点时间做了版本升级. 效果展示 初始化布局 this.force = d3.forceSimulation(n

前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很少,对于一些特殊要求的需求就无能为力了,而d3.js很好地解决了这个问题: 1.安装d3 npm install d3 --save 2.安装d3-sankey npm install d3-sankey --save 3.引入对应的模块 import * as d3 from 'd3' impor

[转] D3.js 之 d3-shap 简介 译者注 原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape 译者: ssthouse 联系译者: 邮箱(ssthouse@163.com) & 微信(wssst123456789) 译文 假设你现在想创建一个用于学习特定数据集的工具, 你最容易想到的呈现方式是什么呢? 一个可以自定义的 chart? 一个抽象的坐标系统? 将数据编码成图像来表示? 每一种方法都有它的好处. 比如你想做探索性的数据可视

echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.echarts.js容易使用 echarts.js的官方文档比较详细,而且官网中提供大量的使用示例供大家使用 2.echarts.js支持按需求打包 echarts.js官网提供了在线构建的工具,可以在线构建项目时,选择项目所需要使用到的模块,从而达到减小JS文件的体积 3.echarts.js开源 4.支持中国地图功能 这个在其他的一些框架中是没有的,所以为这个功能点个赞 但是e

前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果 可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束 绿色实线: 专利已经授权 实现 下面让我们看看如何一步步实现上图的效果. 分析数据 [

上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来的基础上添加两个东西. 添加一个按钮 <div id="option"> <input name="updateButton" type="button" value="Update" onclick="

前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 本文原创地址:http://www.cnblogs.com/landeanfen/p/6054654.html 一.MVVM大比拼 关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比

小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法,渲染在你要显示的地方,虽然功能实现了,可是没有实现拖拽,我那是点击,所以小颖今天就看了下html5的拖放,然后写了个小示例,希望对大家有所帮助. 小颖是用vue写的嘻嘻,大家要是用js实现的话看看HTML 5 拖放 代码请看这里,当当当当: html: <template> <div cla

vue中vue-router的使用: