D3.js的V5版本-Vue框架中使用(第一章) ---SVG基础

最新推荐文章于 2024-08-24 07:28:39 发布
最新推荐文章于 2024-08-24 07:28:39 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： d3 文章标签： D3-V5-Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/davidPan1234/article/details/80704302
版权
本文介绍了D3.js V5版本在Vue框架中使用SVG的基础知识，涉及viewport、viewbox和preserveAspectRatio的概念。讲解了它们的含义和作用，如viewport的物理窗口，viewbox的实物窗口，以及如何保留横纵比。还提到了坐标系统的理解，大写和小写参照的不同，并简单提及弧线(A/a)的使用，强调深入学习的重要性。
摘要由CSDN通过智能技术生成
1.基本概念
  • viewport: 物理窗口
  • viewbox: 实物窗口
  • preserveAspectRatio: 保留横纵比
(1) .viewport: 物理窗口
用 x,y,width,height。这 4 个属性，在页面上固定的矩形区域
(2). viewbox: 实物窗口
定义 SVG 元素在 viewport 中的具体尺寸比例
列如： <svg width= "500" height= "200" viewBox= "0 0 50 20" >
  <rect x=
最低0.47元/天 解锁文章
空谷足音 -จุ
关注
专栏目录
vue使用svg文件补充-svg放大缩小（使用d3.js）
黄小堆
04-30 4332
前言 项目需求是要引入svg文件，然后对里面的元素进行赋值，完了之后还要能够让svg放大缩小，点击查看全屏。针对上一篇文章，进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 先看看svg文件的代码 思路：我的想法就是循环拿到里面的id，然后跟后台的数据匹配，然后赋值。因为后台返回的数据id是没有后面的_C和_V 的。所以需要我前端的处理。 2. 前端js代码： ...
vue结合D3.js做的动态的可交互的SVG图形组件
03-06
vue结合D3.js做的动态的可交互的SVG图形组件。 下面是其中的几行代码： data: { svg: undefined, point1Instance: undefined, // 两个主要端点之一 point2Instance: undefined, // 两个主要端点之一 pathInstance: undefined, // 两个端点之间的连线 point1X: 100, point1Y: 100, point2X: 300, point2Y: 300, innerCircle: 5, // 两个端点之间还有 5 个端点 otherInstance: [] // 其他端点实例 },
Vue-D3 开源项目安装与使用指南
最新发布
gitblog_00745的博客
08-24 248
Vue-D3 开源项目安装与使用指南 vue-d3a vue.js plugin for D3项目地址:https://gitcode.com/gh_mirrors/vu/vue-d3 本指南旨在帮助开发者快速了解并上手 Vue-D3 这一开源项目。Vue-D3 结合了 Vue.js 的强大模板系统和 D3.js 强大的数据可视化能力，旨在简化在 Vue 应用中创建复杂数据可视化的流程。下面将分...
vue3中使用d3.js绘制流程图(TS语法)
qq_45079530的博客
07-11 5050
【代码】vue3中使用d3.js绘制流程图(TS语法)
D3.js的V5版本-Vue框架中使用-树状图
hsany330的专栏
06-09 1176
一. api简介 d3.tree()，创建一个树状图生成器 d3.tree().size()，定义树的大小 d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据 node.descendants()得到所有的节点，已经经过转换的数据 node.links()，得到所有的边，已经经过转换的数据 二.Vue中使用 *点击节点可展开收缩 <template lang='pug'> div.tree-contain...
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
10-14
主要介绍了vue使用svg文件补充-svg放大缩小操作(使用d3.js)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中 引入使用 D3.js
热门推荐
明天也要努力的博客
07-26 1万+
推荐几个D3.js学习文档 D3.js 中文网 D3.js 入门教程
D3.js的V5版本-Vue框架中使用(第十章) ---流程图
空谷足音的博客
09-26 6672
1. 效果展示 2. 使用dagre-d3 需要安装dagre-d3库，d3的流程图库。 3. 代码示例（封装组件） 主要代码讲解： //得到流程图绘制对象 this.graph = new dagreD3.graphlib.Graph().setGraph({      // 控制方向      rankdir: this.direction }).setDefault...
D3.js的V5版本-Vue框架中使用(第九章) ---力导向图
空谷足音的博客
07-16 5786
一. Api使用 d3.forceSimulation() ，新建一个力导向图， d3.forceSimulation().force(),添加或者移除一个力 d3.forceSimulation().nodes()，输入是一个数组，然后将这个输入的数组进行一定的数据转换 d3.forceLink.links()，这里输入的也是一个数组（边集），然后对输入的边集进行转换 tick函数，这...
D3.js的V5版本-Vue框架中使用(第八章) ---树状图
空谷足音的博客
07-12 3709
一. api简介d3.tree()，创建一个树状图生成器d3.tree().size()，定义树的大小d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据node.descendants()得到所有的节点，已经经过转换的数据node.links()，得到所有的边，已经经过转换的数据二.Vue中使用*点击节点可展开收缩&lt;template l...
使用d3vue开发的Topo图
08-12
使用d3 vue开发的Topo图
vue+element工作流程图
05-12
仿钉钉工作流的流程图树，可无限添加审批人和条件，可根据条件自动计算进入那一条流程。vue+element纯前端代码手写，可以结合自定义表单组合任意工作流。
d3-org-tree:使用d3.js v5构建的高度可定制的组织树
03-08
d3-org-tree是使用d3.js v5构建的高度可定制的树，可以在现代浏览器（例如Chrome ， Edge ， Firefox和Safari 。 除d3.js外，它没有任何第三方依赖性。 某些d3-org-tree功能： 自定义节点样式，包括svg和通过...
vue 创建图片坐标点_d3.js V5版本在vue里使用 自定义节点图片
weixin_42513944的博客
02-05 599
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").a...
d3 加载svg文件并使用zoom
weixin_42390878的博客
12-20 3527
d3.xml("xxx.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.documentElement); } 使用d3.xml 加载 官方例子：https://bl.ocks.org/mb...
基于vue的简单流程图开发
weixin_33770878的博客
10-18 5045
严重拖延症，一方面这项目模块纯属个人娱乐。另一方面，流程图这块涉及的东西还是蛮多的，这次也只是介绍一些简单的部分。拖了这么久，现在终于要开始硬着头皮写一篇基于vue+svg的流程图"伪教程"文章了。初次献丑，还请轻喷。 模块简介 项目地址 图片预览 出于学习vue而非兼容的目的，本项目仅考虑现代浏览器( 谷歌 )，部分兼容问题还请见谅。 本模块的开发源于对流程图的简单需求( 纯UI实现，暂不存在业...
vue使用svg图
Wind的博客
11-23 3653
1，安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2，进行webpack配置，在webpack.base.conf.js的rules数组内添加如下：  3，在src文件夹下新建icons文件夹，并在icons文件夹新建index.js import Vue from 'vue' import SvgIco...
学会这些Vue小技巧，能更快的完成手头的工作
小程序公社
06-22 558
每天都在写代码，虽然手底下马不停蹄的敲，但是该来的加班还是会来的，如何能更快的完成手头的工作，提高自己的开发效率，今天小编给大家带来了这几个Vue小技巧，终于可以在六点像小鹿一样奔跑着下班了。 学会使用$attrs 与 $listeners，二次包装组件就靠它了 前几天产品经理给我甩过来一份管理系统的设计原型，我打开看了看，虽然内心是拒绝的，但是为了活着，还是要做的。小编看了看原型，发现系统中的大部分弹框右下角都是确定和取消两个按钮。如果使用element-ui提供的Dialog，那么每一个弹框都要手动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值