空谷足音的博客

special-ui一个mini且可爱的可视化组件库(https://github.com/davidpan123/specialUi), 欢迎点赞！！安装： npm i special-ui全局使用：import Vue from 'vue'import specialUi from 'special-ui'Vue.use(specialUi)按需引入:import Vue from 'vue'import {FlyLine} from 'special-ui'V.

1.效果图小球会从（0，0）位置过渡到最终的位置，显示动画效果，点击更新、增加、减少按钮能看到具体呈现的动画效果！2. 代码<template lang='pug'> div.histogram-pane(:id='id') <div class="btn-pane"> <button @click="...

1. 效果图2. code<template lang='pug'> div.histogram-pane(:id='id') svg.histogram-container g.viewport </template> <script>import * as ...

1.做项目中，因需要，用d3写了个人车关系图项目地址：https://github.com/davidpan123/vue-d3

1.效果展示2. 代码<template lang='pug'> div.histogram-pane(:id='id') svg.histogram-container g.viewport </template> <script>/** * 散点图 */...

1. 效果展示2. 使用dagre-d3需要安装dagre-d3库，d3的流程图库。3. 代码示例（封装组件）主要代码讲解：//得到流程图绘制对象this.graph = new dagreD3.graphlib.Graph().setGraph({     // 控制方向     rankdir: this.direction}).setDefault...

一. api简介d3.tree()，创建一个树状图生成器d3.tree().size()，定义树的大小d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据node.descendants()得到所有的节点，已经经过转换的数据node.links()，得到所有的边，已经经过转换的数据二.Vue中使用*点击节点可展开收缩&lt;template l...

一. Api使用d3.forceSimulation() ，新建一个力导向图， d3.forceSimulation().force(),添加或者移除一个力 d3.forceSimulation().nodes()，输入是一个数组，然后将这个输入的数组进行一定的数据转换 d3.forceLink.links()，这里输入的也是一个数组（边集），然后对输入的边集进行转换 tick函数，这...

&lt;template lang='pug'&gt; div.histogram-pane(:id="id") svg&lt;/template&gt;&lt;script&gt;import * as d3 from 'd3'export default { name: '', data () { return { ...

1.基本概念viewport: 物理窗口viewbox: 实物窗口preserveAspectRatio: 保留横纵比(1) .viewport: 物理窗口 用 x,y,width,height。这 4 个属性，在页面上固定的矩形区域(2).viewbox: 实物窗口定义 SVG 元素在 viewport 中的具体尺寸比例列如：&lt;svg width="500" height="200" vi...

1、选择元素   在D3.js中，选择元素的函数有两个d3.select() d3.selectAll()         这两个函数返回的就是选择集常见的用法如下：let svg = body.select("svg");//选择body中的svg元素  let p = body.selectAll("p");//选择body中所有的p元素  2、元素操作name为元素名称； before:cs...

一. 比例尺此处记录常用的四种常用比例尺：线性、序数、序数段、时间比例尺，其它稍后更新或者自行官网查看d3.scaleLinear()d3.scaleOrdinal()d3.scaleBand()d3.scaleTime()二. 坐标轴api: axisBottom\Left\Right\Top等使用：d3.axisBottom(scale); scale比例尺三. vue使用&lt;templa...

一. api讲解 * .attr(xxx) .transition() .attr(xxx)，transition()表示添加过渡，也就是从前一个属性过渡到后一个属性 * .duration(2000)，表示过渡时间持续2秒 * .delay(500)，表示延迟0.4秒后再进行过渡 * .ease(d3.easeElasticInOut)表示过渡方式，注意这里和v3版本的区别二. vue使用&lt...

一. Api使用on("eventName",function)；该函数是添加一个监听事件，它的第一个参数是事件类型，第二个参数是响应事件的内容d3.select(this), 选择当前元素   常见的事件类型click：鼠标单击某元素时触发，相当于mousedown和mouseup的组合mouseover：鼠标放在某元素上触发mouseout：鼠标移出某元素时触发mousemove：鼠标移动时触...

一. api简介为了画饼状图需要知道了解以下知识点：1.弧生成器(1). 官方api带参或不带参数效果一样：innerRadius(num)-内半径；outerRadius(num)-外半径;var arc = d3.arc() .innerRadius(0) .outerRadius(100) .startAngle(0) .endAngle(Math.PI / ...