d3.js
文章平均质量分 83
专业前端小白
这个作者很懒,什么都没留下…
展开
-
D3.js入门实例----制作动态条形图
1.引入资源--js<script src="http://d3js.org/d3.v3.min.js"></script><script type="text/javascript" src="js/jquery.min.js" ></script>2.创建svg画布var svg=d3.select("body"原创 2018-05-29 17:04:22 · 4004 阅读 · 2 评论 -
d3.js的交互式操作
与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应。什么是交互交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应。对可视化图表来说,交互能使图表更加生动,能表现更多内容。例如,拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种:鼠标、键盘、触屏。如何添加交互对某一元素添加交互操作十分简单,代码如下:var...转载 2018-05-29 17:35:08 · 1093 阅读 · 0 评论 -
使用d3.js画簇状条形图
效果图:直接上代码:<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view...原创 2019-03-28 16:07:58 · 864 阅读 · 1 评论 -
d3.js树状图的zoom事件和节点不重叠
效果图如下:话不多说,直接上代码:<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam...原创 2019-04-02 15:12:35 · 1640 阅读 · 1 评论 -
d3.js tree布局,节点居中显示
你是否有着这样的烦恼,你的树图太大,超出部分需要使用滚动条,这时需要快速的找到其中一个节点该怎么办?实现的效果图如下:代码如下:var nodeX=0,nodeY=0;d3Tree();$("#wrapper").animate({scrollTop:nodeY+"px" }, 200);$("#wrapper").animate({scrollLeft:nodeX+"...原创 2019-04-12 16:49:35 · 2995 阅读 · 1 评论