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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="960" height="500"> </svg>
</div>
</template>
<script>
export default {
mounted() {
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
color = d3.scaleOrdinal(d3.schemeCategory10); var a = {
id: "a"
},
b = {
id: "b"
},
c = {
id: "c"
},
nodes = [a, b, c],
links = []; var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-1000))
.force("link", d3.forceLink(links).distance(200))
.force("x", d3.forceX())
.force("y", d3.forceY())
.alphaTarget(1)
.on("tick", ticked); var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node"); restart(); d3.timeout(function() {
links.push({
source: a,
target: b
}); // Add a-b.
links.push({
source: b,
target: c
}); // Add b-c.
links.push({
source: c,
target: a
}); // Add c-a.
restart();
}, 1000); d3.interval(function() {
nodes.pop(); // Remove c.
links.pop(); // Remove c-a.
links.pop(); // Remove b-c.
restart();
}, 2000, d3.now()); d3.interval(function() {
nodes.push(c); // Re-add c.
links.push({
source: b,
target: c
}); // Re-add b-c.
links.push({
source: c,
target: a
}); // Re-add c-a.
restart();
}, 2000, d3.now() + 1000); function restart() { // Apply the general update pattern to the nodes.
node = node.data(nodes, function(d) {
return d.id;
}); node.exit().transition()
.attr("r", 0)
.remove(); node = node.enter().append("circle")
.attr("fill", function(d) {
return color(d.id);
})
.call(function(node) {
node.transition().attr("r", 8);
})
.merge(node); // Apply the general update pattern to the links.
link = link.data(links, function(d) {
return d.source.id + "-" + d.target.id;
}); // Keep the exiting links connected to the moving remaining nodes.
link.exit().transition()
.attr("stroke-opacity", 0)
.attrTween("x1", function(d) {
return function() {
return d.source.x;
};
})
.attrTween("x2", function(d) {
return function() {
return d.target.x;
};
})
.attrTween("y1", function(d) {
return function() {
return d.source.y;
};
})
.attrTween("y2", function(d) {
return function() {
return d.target.y;
};
})
.remove(); link = link.enter().append("line")
.call(function(link) {
link.transition().attr("stroke-opacity", 1);
})
.merge(link); // Update and restart the simulation.
simulation.nodes(nodes);
simulation.force("link").links(links);
simulation.alpha(1).restart();
} function ticked() {
node.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
}) link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
}
},
}
</script>

4. demo效果图

d3.js在vue项目中的安装及案例的更多相关文章

  1. cytoscape.js在vue项目中的安装及案例

    1. 安装: npm i cytoscape --save 2. 引入:main.js import cytoscape from 'cytoscape'; Vue.prototype.$cytosc ...

  2. vue项目中npm安装sass,less,stylus

    用vue-cli脚手架搭建出来的,默认是用标准css的.如果你想用sass,less,stylus就需要自己手动安装一下了. 进入项目文件夹,然后安装(这里以stylus为例)stylus和stylu ...

  3. 【bcrypt】vue项目中bcrypt安装报错

    [报错] 报错时安装方法: npm install bcrypt [解决方法] npm install bcryptjs 用 bcryptjs 替换 bcrypt 即可.

  4. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  5. 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'

    canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...

  6. vue 项目中安装npm--save-dev 和 --save 命令

    在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...

  7. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  8. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  9. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

随机推荐

  1. 一类n阶微分方程转1阶微分方程组

  2. 使用hibernate从一方获取多方信息时报错:org.hibernate.LazyInitializationException: failed to lazily initialize a collection of role

    引起原因:hibernate加载关联对象的方式有懒加载方式和立即加载方式. 如果在多对一的配置中没有指定加载方式,而一对多的配置中指定了懒加载方式,因此在获取一方是可获取到值,而获取多方时sessio ...

  3. c#在panel或groupbox中添加窗体,实现点击不同按钮或combox时panel中窗体切换,在xtratabcontrol中添加窗体

    参考panel添加窗体: http://blog.csdn.net/illegalname/article/details/65444249 http://blog.csdn.net/Eastmoun ...

  4. nginx 下载 大文件被截断

    如果出现大文件被截断,且ngix的日志大量出现以下类似报错: 则说明是nginx没有fastcgi_temp的读写权限.其中fastcgi_temp是自己的文件夹名称,每个人的不同且路径也会不同,这个 ...

  5. WordPaster-KesionCMS V8整合教程

    1.上传WordPaster文件夹 2.上传ckeditor3x插件文件夹 4.修改ckeditor编辑器的config.js文件,启用插件,在工具栏中增加插件按钮 5.在文章页面增加插件初始化代码 ...

  6. 20170905工作日记--listview优化大全

    1. 适配器设计模式 实例描述:我们国家的电器使用普通的扁平两项或三项插头,而去外国的话,使用的标准就不一样了,比如德国,使用的是两项圆头的插头,那么我们使用的手机充电器插头无法插到德国的插排中去,那 ...

  7. 使用Servlet动态生成验证码

    最近在重新看了一遍servlert,看到篇优质博客推荐给大家:https://www.cnblogs.com/xdp-gacl/p/3798190.html 顺便把学习过程中的知识记录下来. 今天是如 ...

  8. IP地址和域

    1. 0. 0. 0到 126.255.255.255为A类 主要分配给具有大量主机而局域网络数量较少的大型网络 128.0.0.0到191.255.255.255为B类 一般用于国际性大公司和政府机 ...

  9. QOpenGLFunctions的相关的使用(1)

    QOpenGLFunctions的使用 1.  QOpenGLFunctions  说明  QOpenGLFunctions 类提供了跨平台的OpenGl ES2.0 API版本. OpenGL 2. ...

  10. AngularJS 模块及provide

    一.模块 模块是一些功能的集合,如控制器.服务.过滤器.指令等子元素组成的整体. 1.注册和使用 模块相当于是一个注册表,保存着名字和编程元素的对照表,可存入也可取出. angular.module( ...