vue如何使用d3.js折线图

2024-09-03

Vue整合d3.v5.js制作--折线图(line)

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

如果觉得作者写的对你有用,可以打赏作者哦!owo 多少不限,支持而已. 实现折线图不得不说的是d3的线段生成器: 假设data=[1,2,5,7,5,8,2,6]var line = d3.svg.line(data)/*定义了一个叫line的线段生成器,line()是一个函数,会访问传入参数的每一项的内容,data代表数据*/ .x(function(d,i){return i})/*x和y都是参数,规定了路径的x坐标和y坐标,.x()和.y()规定了访问数据的方式,内置的无名函数是帮助访问

D3.js 弦图的制作

这是一种用于描述节点之间联系的图表. 1. 弦图是什么弦图(Chord),主要用于表示两个节点之间的联系. 两点之间的连线,表示谁和谁具有联系: 线的粗细表示权重: 2. 数据初始数据为: var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; var population = [ [ 1000, 3045 , 4567 , 1234 , 3714 ]

在Vue项目里面使用d3.js

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

记录d3.js 力导向图的平移缩放，类似地图导航点击某一项移动到当前位置

项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间搜索出来的结果列表展示用的element-ui表格,前台进行分页,不依赖后台,下面记录一下svg的平移 function translateSvg(d){ //获取svg的父元素 const parentBox = svg.node().parentElement //获取父元素的宽度 const fullWidth = p

【D3.js】Focus + Context 折线图

利用D3.js库实现Focus+Context的折线图.读取data.tsv文件数据 index.html <!DOCTYPE html> <meta charset="utf-8"> <style> svg { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .line { fill:

d3.js 教程模仿echarts折线图

今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 class Line { constructor() { this._width = 1100; this._height = 800; this._padding = 10; this._offset = 35; this._margins = {right: 50,bottom: 50,left:

D3.js(v3)+react 制作一个带坐标轴与比例尺的折线图

本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2000,11920],[2001,13170],[2002,14550],[2003,16500],[2004,19440],[2005,22870], [2006,27930],[2007,35040],[2008,45470],[2009,51050],[2010,59490],[2011,73140],

vue项目中基于D3.js实现桑基图功能

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

Vue和d3.js(v4)力导向图force结合使用，v3版本升级v4【一】

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

使用d3.v5实现折线图与面积图

d3最新是V5版的,比起V2的API变动了不少,写下我实现过程效果图: 面积图: 折线图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" media="screen" rel="stylesheet" typ

vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图，折线图)

一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -s 引入的方式有两种: 1.main.js中全局引入 import echarts from 'echarts' Vu

D3.js画思维导图（转）

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node

用D3.js画树状图

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

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

Vue + d3.js实现在地图上选点

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

vue使用axios读取本地json文件来显示echarts折线图

编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examples/zh/index.html 用HBuilderx新建elementUI项目. 安装axios:打开命令行,进入项目文件夹下,输入: cnpm install axios main.js中添加: import echarts from 'echarts' import VueResource

Morris.js和flot绘制折线图的比较

[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的,也就是其使用SVG和VML来绘制图形,而flot则是使用Canvas进行绘制,在绘制效率和浏览器兼容性等方面会有出入,同时两者需要的数据格式也不相同.本文中对两者的使用和性能进行了比较. [文章索引] Morris.js的使用 flot的使用性能比较 [一.Morris.js的使用] Morri

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.m

超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

超酷HTML5 Canvas图表应用Chart.js自定义提示折线图效果预览实例代码 <div class="htmleaf-container"> <div class="htmleaf-content"> <div style="width:30%;margin:0 auto;"> <div> <canvas id="canvas" height="450

【 D3.js 高级系列 — 10.0 】思维导图

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有"树形".因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: