export default { data() { return { min: 1, max: 10, timer:null //定时器名称 } }, mounted() { this.add(); }, methods: { add() { let _this = this; _this.timer = setInterval(function(){//定时器开始 _this.min++; if(_this.min == _this.max){ clearInterval(_this.timer);// 满足条件时 停止计时 } },1000) }, } };
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
好不容易是用wordpress搭建好了我的网站，找了几个不错的插件提升了一下性能，也解决了安装主题时出现的各种问题，终于能够正常地使用了。正当我兴致冲冲地打开文章编辑器，正打算开始写我的第一篇博客的时候，又有一个意外的错误出现了——那就是wordpress的默认编辑器古腾堡。
我上网搜索了好半天，好像大多数人都有遇到这个问题，古腾堡是WordPress十多年来第一次更换的全新的编辑器，从他的外观来看，确实是十分的舒服，功能也似乎很完善，可惜还是有些小bug。
网上主要的解决方法有三种：
1、切换浏览器。他们都说换成谷歌浏览器的时候就不会出现这个问题了。但是我一开始用的就是谷歌浏览器，所以对我不起作用。
2、清楚浏览器缓存， 这个我也照做了，也是没有什么效果。
3、安装Classic Editor 插件，我就是采用这个办法解决的。而且Classic Editor 插件可以切换区块编辑模式和经典编辑模式，虽然经典编辑模式十分的丑陋，而且用的也不是特别舒服，但是我意外地发现，区块编辑模式就是原来的古腾堡编辑器，在安装了插件之后，原来的意外的错误就再也不出现了，而且当我把Classic Editor禁用了之后，也仍然不见原来的报错。
虽然问题是解决了，但可惜我刚开始使用wordpress，还没有开启错误日志，所以也不知道这个问题到底是为什么出现，在网上搜索了好久，也不能确定我这个问题到底出现在哪里。
反正结果还是好的，就先在这里埋个坑吧，以后再遇到的时候再回来补充！
另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog 作者：贪玩的木木 https://www.bilibili.com/read/cv6589030/ 出处：bilibili
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在Envato Tuts +的代码类别中，我们涵盖了很多 内容。 范围从诸如如何使用一些最新JavaScript框架编写代码到如何通过诸如WordPress和OpenCart之类的内容管理系统实现某些目的 。
因为我们倾向于将大部分内容集中在已经对计算有一定程度的了解的人们，所以我们经常假设在开始教程之前已经做好了某些准备。
例如，有时我们假设您在进入实际框架之前已经掌握JavaScript的知识。 或者，也许我们假设您在开始有关如何使用新库构建Web应用程序的教程之前对PHP或Ruby有一定的了解。
在我们发布的“ 如何做”文章中，我们正在努力提供教程，向读者提供建立和运行特定软件所绝对必要的步骤，尤其是那些与很多软件兼容的软件。在Envato市场可用。
如果您有兴趣使用WordPress构建网站，那么您应该对WordPress主题应该有一个有效的定义，并且对如何安装WordPress主题有一个实际的了解。
在了解如何安装WordPress主题之前，让我们定义WordPress主题应该是什么。 我区分这从一个WordPress主题是什么，因为你经常会发现，做更多的比他们应该的主题。 如果您选择更改主题的设计，这些主题将很难尝试其他主题。
我将在稍后详细讨论。
现在，让我们使用WordPress Codex中提供的定义：
从根本上讲，WordPress主题系统是一种“蒙皮”您的Weblog的方法。 然而，它不仅仅是一个“皮肤”。 对您的网站进行外观设计意味着仅更改设计。 WordPress主题可以更好地控制您网站上材料的外观和呈现方式。
从此定义中得出的主要结论是，WordPress主题提供了您网站的演示。 也就是说，它负责使您的网站或博客具有特定外观。
它会影响您所看到的所有内容，设置内容样式以及影响字体，配色方案等。
安装WordPress主题时，请务必注意其提供的功能。 现代主题通常不仅仅包括演示。 也就是说，它们引入了功能。
功能可以定义为任何可以改变主题行为的东西。 例如，假设您的主题在帖子编辑器屏幕上提供了某种类型的搜索引擎优化选项。
并且由于这不在表示的范围之内，因此被认为是功能。 如果主题提供了类似的内容，那么您就有遭受“主题锁定”之苦的危险。
它是这样工作的：安装一个主题，它不仅提供演示文稿（例如上面概述的SEO功能）。 如果您选择将站点更新为不提供完全相同的SEO功能实现的新主题，则会丢失它。 所有的。
您可能会得到一个很棒的设计，但是您已经失去了为主题提供所有SEO信息的工作。 因此，您要么被锁定使用与开始时相同的主题，要么面临使用新主题并失去所有工作的麻烦。
最终，主题不应该包括这种类型的功能。 功能保留给插件。 这是我们将在另一篇文章中讨论的内容。
现在，请记住主题应该全部与演示有关。 如果您可以使用主题锁定，那么选择一个可以提供很多功能的主题可能就可以了。 但是，如果您希望最终不时更改设计，请尝试坚持严格遵循修改网站外观的主题。
话虽如此，现在我们可以讨论安装WordPress主题所需的过程。 实际上，有两种方法可以执行此操作：
尽管第一个选项可以说是最简单的，但我们将在本指南中介绍这两个选项，以确保为您提供了最全面的信息。
请注意，本指南假定您已经在计算机或Web主机上安装了WordPress。 我们将逐步完成获取主题并通过WordPress或FTP进行安装的过程。
话虽如此，让我们开始吧。
网上有很多地方可以下载WordPress主题。 但是，从任何地方下载主题并不总是安全的。 审查主题提供者的声誉很重要。
这超出了本文的范围； 但是，从WordPress主题存储库或Envato Market中选择主题不会出错。
出于本教程的目的，我们将使用免费提供的第二十六主题。 首先，我们将从WordPress中安装它，然后我们将了解如何通过S / FTP安装它。
对于以下步骤，我假设您是从WordPress仪表板开始的：
无论您选择使用哪种方法来安装主题，这都是我们开始本教程步骤的地方。
要从WordPress本身安装主题，请单击“ 外观”菜单，然后选择“ 主题”选项。
从那里，您将看到所有已安装的主题。
接下来，单击屏幕顶部的添加新按钮。 从这里开始，您将进入一个如下所示的屏幕：
注意 页面顶部的“ 搜索主题”字段。 在此字段中，输入“ 二十十六”（不带引号），它将返回以下屏幕：
之后，单击选项以安装主题。 之后，WordPress将为您提供预览主题或激活主题的选项。 对于通过S / FTP上传主题的用户，也将提供相同的选项。
因此，目前，我们将看一下通过上传文件来安装主题的必要步骤。 如果您对以下替代步骤不感兴趣，则可以跳至下面的“ 激活主题”部分。
此版本的主题安装假定您熟悉术语服务器，端口，用户名和密码。 它还假定您熟悉wp-content和theme目录。 如果不是这样，那么最好的做法就是坚持上述方法。
但是，如果以上都不是行话，那就继续吧。 就本演示而言，我将使用Transmit作为我的S / FTP客户端； 但是，请随时使用您喜欢的任何客户端。
首先，我们需要从WordPress Theme Repository下载二十一十六 。
一旦您单击Download ，这会将主题的zip文件放置在您选择的目录中。
接下来，您将要提取存档。 这将在包含zip文件的目录中创建一个包含所有主题文件的子目录。
之后，连接到您的Web服务器并导航到WordPress安装的wp-content/themes目录。
上载提取主题文件时创建的目录。 从那里跳到WordPress仪表板，然后导航到“ 主题”页面。 您应该看到《 二十一岁月》的副本 出现在主题列表中。
此时，无论我们如何安装主题，我们都准备好继续激活主题。 就是说，如果您选择使用S / FTP或选择从WordPress中安装主题，则会为您提供相同的选项集。
所以做吧。
通过WordPress下载主题或通过S / FTP上传主题之后，便拥有了激活主题并更新网站外观所需的一切。
获得主题之后，应该为您提供激活主题的选项：
在这里，您可以选择 实时预览以了解如何更改当前内容，或者您可以单击“ 激活”继续进行设置。 我选择与后者一起使用。
完成后，您将看到以下屏幕：
从那里开始，您应该能够像在安装此主题之前一样继续使用WordPress。 这意味着您可以继续添加帖子，页面，类别等。
根据主题，您还可能有机会更新标题图像，背景图像等。 请注意，这取决于已安装的主题。
要确切了解您的主题提供了什么，请务必参考文档。
如您所见，安装WordPress主题是一个相对简单的过程，尤其是从WordPress应用程序中进行安装时。 即使您对使用FTP客户端的过程感到有些恐惧，一旦上传了文件，激活主题仍然相对容易。
其次，请注意区分想要的主题类型很重要。 您是否想要一个具有很多功能而您永远都不会改变的主题，还是想要一个与一组插件完美配合，可以独立于该功能更改网站外观的主题？
无论哪种情况，您都应该拥有选择主题，安装主题并以最适合自己的方式激活它所需的一切。
最后，如果您要寻找适合几乎所有情况的主题主题，请务必查看Envato Market中提供的功能 。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：csdn
原文链接：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
height: 100%;
}
.container {
width: 400px;
margin: 200px auto;
height: 100px;
position: relative;
}
.box {
width: 100px;
height: 100px;
position: absolute;
float: left;
}
#rigth {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
}
#left {
position: absolute;
left: 0px;
background-color: rgba(0, 0, 0, 0.3);
top: 50%;
transform: translateY(-50%);
}
span:hover {
cursor: pointer;
color: red;
}
ul {
width: 100px;
height: 100px;
transform-style: preserve-3d;
float: left;
transition: all 1s;
}
.top {
background-color: red;
transform: translateY(50px) rotateX(-90deg);
transform: translateY(50px) rotateX(-90deg);
background: url('./image/4.jpg') no-repeat;
}
.footer {
transform: translateY(-50px) rotateX(90deg);
background: url('./image/2.jpg') no-repeat;
}
.left {
transform: translateX(50px) rotateY(90deg)
}
.rigth {
background-color: yellow;
transform: translateX(-50px) rotateY(-90deg);
}
.Front {
background-color: pink;
transform: translateZ(50px);
background: url('./image/1.jpeg') no-repeat;
}
.behind {
background-color: blue;
transform: translateZ(-50px) rotateX(-180deg);
background: url('./image/3.jpg') no-repeat;
}
/* 前 */
.container ul:nth-child(2) .Front {
background-position: -100px 0;
}
.container ul:nth-child(3) .Front {
background-position: -200px 0;
}
.container ul:nth-child(4) .Front {
background-position: -300px 0;
}
/* 底部 */
.container ul:nth-child(2) .footer {
background-position: -100px 0;
}
.container ul:nth-child(3) .footer {
background-position: -200px 0;
}
.container ul:nth-child(4) .footer {
background-position: -300px 0;
}
/* 后面 */
.container ul:nth-child(2) .behind {
background-position: -100px 0;
}
.container ul:nth-child(3) .behind {
background-position: -200px 0;
}
.container ul:nth-child(4) .behind {
background-position: -300px 0;
}
/* 上面 */
.container ul:nth-child(2) .top {
background-position: -100px 0;
}
.container ul:nth-child(3) .top {
background-position: -200px 0;
}
.container ul:nth-child(4) .top {
background-position: -300px 0;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<span id="rigth">下张</span>
<span href="JavaScript:;" id="left">上张</span>
</div>
</body>
<script>
var rigth = document.getElementById("rigth")
var left = document.getElementById("left")
var ul = document.querySelectorAll(".container ul")
var index = 0
var flags = false
rigth.onclick = function () {
if (flags == false) {
flags = true
index++
for (var i = 0; i < ul.length; i++) {
ul[i].style.transform = "rotateX(" + index * 90 + "deg)"
ul[i].style.transitionDelay = "" + i * 0.3 + "s"
}
setTimeout(function () {
flags = false
}, 2000)
}
}
left.onclick = function () {
if (flags == false) {
flags = true
index--
for (var i = 0; i < ul.length; i++) {
ul[i].style.transform = "rotateX(" + index * 90 + "deg)"
ul[i].style.transitionDelay = "" + i * 0.3 + "s"
}
setTimeout(function () {
flags = false
}, 2000)
}
}
</script>
</html>
作者：yuanzhuang
链接：https://www.jianshu.com/p/10c90c482795
来源：简书
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
-
旋转正方形
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<meta charset="utf-8">
-
<title>旋转立方体</title>
-
<style type="text/css">
-
.stage{
-
position: relative;
-
perspective: 800px;
-
}
-
@keyframes rotate-frame{ /* 设置动画效果 */
-
0% {
-
transform: rotateX(0deg) rotateY(0deg);
-
}
-
-
50% {
-
transform: rotateX(360deg) rotateY(0deg);
-
}
-
100% {
-
transform: rotateX(360deg) rotateY(360deg);
-
}
-
}
-
.container{
-
width: 450px;
-
height: 450px;
-
margin: 0 auto;
-
transform-style:preserve-3d;
-
animation: rotate-frame 8s infinite linear;
-
animation-timing-function: all;
-
animation-direction: normal;
-
-
animation-fill-mode: backwards;
-
-
transform-origin: 50% 50% 75px;
-
-
/*background: yellow; 容器屏幕背景色*/
-
}
-
.container:hover{
-
/*覆盖时暂停动画*/
-
animation-play-state: paused;
-
}
-
.side{
-
width: 150px;
-
height: 150px;
-
position: absolute;
-
text-align: center;
-
line-height: 150px;
-
font-size: 50px;
-
}
-
.top{
-
left: 150px;
-
top: 0;
-
transform: rotateX(-90deg); /* 设置角度 */
-
transform-origin: bottom;
-
background-color: rgba(0,0,255,0.5);
-
}
-
.bottom{
-
left: 150px;
-
top: 300px;
-
transform: rotateX(90deg);
-
transform-origin: top;
-
background-color: rgba(0,255,0,0.5);
-
}
-
.left{
-
left: 0;
-
top: 150px;
-
transform: rotateY(90deg);
-
transform-origin: right;
-
background-color: rgba(255,0,0,0.5);
-
}
-
.right{
-
left: 300px;
-
top: 150px;
-
transform: rotateY(-90deg);
-
transform-origin: left;
-
background-color: rgba(0,0,100,0.5);
-
}
-
.front{
-
left: 150px;
-
top: 150px;
-
transform: translateZ(150px);
-
background-color: rgba(0,100,0,0.5);
-
}
-
.back{
-
left: 150px;
-
top: 150px;
-
background-color: rgba(100,0,0,0.5);
-
}
-
.rotateX180{
-
/*让倒置的数字倒置回正常状态*/
-
transform: rotateX(180deg);
-
}
-
-
</style>
-
-
</head>
-
<body>
-
<div class="stage">
-
<div class="container">
-
<div class="side top" >1</div>
-
<div class="side bottom">2</div>
-
<div class="side left">3</div>
-
<div class="side right">4</div>
-
<div class="side front">5</div>
-
<div class="side back">6</div>
-
</div>
-
</div>
-
</body>
-
</html>
-
纸片旋转
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
.zpbox{
-
/*设置3D视角*/
-
perspective: 800px;
-
perspective-origin: bottom right;
-
}
-
.box{
-
height: 200px;
-
width: 100px;
-
margin: 50px auto;
-
-
/*preserve-3d 指定子元素定位在三维空间内 */
-
transform-style: preserve-3d;
-
/*指定变换为：linear-线性过渡*/
-
transition-timing-function：linear;
-
-
/*指定旋转动画*/
-
animation-name: action_b1;
-
animation-duration: 4s;
-
animation-timing-function: all;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
animation-fill-mode: backwards;
-
-
position: relative;
-
}
-
.box:hover{
-
/*覆盖时暂停动画*/
-
animation-play-state: paused;
-
}
-
-
.b1{
-
/*声明第一个卡片为浮动，使得两个卡片能重叠*/
-
float: left;
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
}
-
.b2{
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
-
/*第二个卡片旋转90度*/
-
transform: rotateX(90deg);
-
-
/*第二个卡片位于中间位置*/
-
position: absolute;
-
margin-left: 0;
-
margin-top: 0;
-
}
-
.rotateX180{
-
/*让倒置的2、4数字倒置回正常状态*/
-
transform: rotateX(180deg);
-
}
-
-
@keyframes action_b1{
-
100%{
-
transform: rotateX(-360deg);
-
}
-
}
-
-
-
-
-
</style>
-
</head>
-
<body>
-
<div class="zpbox">
-
<div class="box">
-
<div class="b1">
-
<div>1</div>
-
<div class="rotateX180">3</div>
-
</div>
-
<div class="b2">
-
<div>2</div>
-
<div class="rotateX180">4</div>
-
</div>
-
</div>
-
</div>
-
-
-
</body>
-
</html>
-
轮播图3D
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } /*去掉多余的像素*/
-
body{
-
perspective: 800px;
-
}
-
.box{
-
width: 800px;
-
height: 360px;
-
margin: 100px auto;
-
text-align:center;
-
position: relative;
-
left: 50%;
-
margin-left: -400px;
-
/*background-color: #eee;*/
-
transform-style: preserve-3d; /*设置为3D模式*/
-
/*transform: rotateY(-30deg) rotateX(57deg);*/
-
/*transition:5s ease;*/
-
animation-name: animate;
-
animation-duration: 10s;
-
animation-iteration-count: infinite;
-
}
-
-
.box>div{
-
width: 800px;
-
height: 360px;
-
position: absolute;
-
}
-
.box>.up{
-
background: url(flower.jpg); /*引入照片*/
-
transform: rotateX(90deg) translateZ(180px); /* 设置角度 */
-
}
-
.box>.down{
-
background: url(flower.jpg);
-
transform: rotateX(90deg) rotateZ(180deg)translateZ(-180px);
-
}
-
.box>.before{
-
background: url(flower.jpg);
-
transform: translateZ(180px);
-
}
-
.box>.after{
-
background: url(flower.jpg);
-
transform: translateZ(-180px) rotateX(180deg);
-
}
-
.box:hover{
-
animation-play-state: paused; /* 当鼠标悬停的时候停止 */
-
}
-
@keyframes animate{
-
0%{
-
-
}
-
25%{
-
transform: rotateX(90deg);
-
}
-
50%{
-
transform: rotateX(180deg);
-
}
-
75%{
-
transform: rotateX(270deg);
-
}
-
100%{
-
transform: rotateX(360deg);
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<div class="up"></div>
-
<div class="down"></div>
-
<div class="before"></div>
-
<div class="after"></div>
-
</div>
-
</body>
-
</html>
-
轮播
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>轮播</title>
-
<style>
-
.frame{
-
position:absolute;
-
margin: 50px 200px;
-
width:280px;
-
height:200px;
-
overflow:hidden;
-
border-radius:6px;
-
background-color: #000;
-
}
-
.imgdiv img{
-
float:left;
-
width:280px;
-
height:200px;
-
}
-
.imgdiv {
-
position: absolute;
-
width: 1500px;
-
}
-
.play{
-
animation: lbt 10s ;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
}
-
.play:hover{
-
animation-play-state: paused;
-
}
-
-
@keyframes lbt {
-
0%,20% {
-
margin-left: 0px;
-
}
-
20%,40% {
-
margin-left: -300px;
-
}
-
40%,60% {
-
margin-left: -600px;
-
}
-
60%,80% {
-
margin-left: -900px;
-
}
-
80%,100% {
-
margin-left: -1200px;
-
}
-
}
-
-
</style>
-
</head>
-
<body>
-
<div class="frame" >
-
<div class="imgdiv play">
-
<img src="lunbo.jpg" > <!-- 引入照片 -->
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
</div>
-
</div>
-
</body>
-
</html>
-
1
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：csdn
原文链接：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
聊一聊力导向图。力导向图在echarts等快捷的可视化工具中都有非常方便的实现方式。来看看d3.js是如何实现的。
先来一张d3.js官网实现的力导向图的照片：
接下来解释一下d3.js中实现此力导向图的过程。
<!DOCTYPE html> <meta charset="utf-8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // 定义一个svg画布 var svg = d3.select("svg"), // 获取svg画布的宽度 width = +svg.attr("width"), // 获取svg画布的高度 height = +svg.attr("height"); // 定义一个颜色函数 // d3.scaleOrdinal()函数用来定义一个序列，其中的参数d3.schemeCategory20代表序 // 列函数的值域，这里d3.schemeCategory20指的是由RGB十六进制字符串表示的二十种分类 // 颜色的数组。因此，color()函数的值域就是离散的20中颜色值 var color = d3.scaleOrdinal(d3.schemeCategory20); // 创建一个力学模拟器 // d3.forceSimulation()函数用来创建一个空的模拟器 var simulation = d3.forceSimulation() // simulation.force(name,[force])函数的作用是：如果指定了力force，则为指 // 定的名称name分配力并返回该模拟。 如果未指定力，则返回具有指定名称的力，如果 // 没这样的力，则返回undefined。 （默认情况下，新的模拟没有力量。） // d3.forceLink()函数用来创建一个空的link力数组 // d3.forceLink().id()用来指定link力数组中每个节点的id的获取方式 .force("link", d3.forceLink().id(function(d) { return d.id; })) // 创建一个charge数组，forceManyBody()返回一个新的多体力数组 .force("charge", d3.forceManyBody()) // d3.forceCenter()用指定的x坐标和y坐标创建一个新的居中力。 // 如果未指定x和y，则默认为⟨0,0⟩。 .force("center", d3.forceCenter(width / 2, height / 2)); // 读取数据，该例子中的数据是雨果的《悲惨世界》中的人物关系信息。 // 通过力学模拟，人物关系相近的节点会比较接近；反之，节点会比较疏远 d3.json("miserables.json", function(error, graph) { if (error) throw error; // 定义人物节点之间连线的信息 var link = svg.append("g")
.attr("class", "links") // 用line元素来绘制 .selectAll("line") // 绑定json文件中的links数据 .data(graph.links)
.enter().append("line") // 人物节点之间连接线的粗细通过连接线的value字段来计算，value越大，连接线 // 越粗 .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); // 定义人物节点信息 var node = svg.append("g")
.attr("class", "nodes") // 人物节点通过圆来绘制 .selectAll("circle") // 为人物节点绑定nodes数据 .data(graph.nodes)
.enter().append("circle") // 设置节点半径 .attr("r", 5) // 设置节点的填充色，通过节点的group属性来计算节点的填充颜色 .attr("fill", function(d) { return color(d.group); }) // 以定义的这些人物节点为参数，调用drag()函数 // 绑定拖拽函数的三个钩子，即拖拽开始、拖拽中、拖拽结束 .call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)); //为人物节点绑定文字 node.append("title")
.text(function(d) { return d.id; }); // 为力模拟器绑定节点数据 // 会为每个节点自动添加可视化时所需的index,vx,xy,x,y五个字段信息 // 并且为simulation内部计时器tick监听绑定动作，来绘制图形 simulation
.nodes(graph.nodes)
.on("tick", ticked);// 此处在每次tick时绘制力导向图 // 为力模拟器绑定连接线数据 // 调用结束后，会为每个连接线添加可视化时所需要的index,vx,vy,x,y五个字段信息 simulation.force("link")
.links(graph.links); // 定义simulation内部计时器tick每次结束时的动作 function ticked() { // 每次tick计时到时，连接线的响应动作 // 设置连接线两端的节点的位置 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; }); // 每次tick计时到时，节点的响应动作 // 设置节点的圆心坐标 node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
}); // 定义开始拖拽节点时的动作 function dragstarted(d) { // restart()方法重新启动模拟器的内部计时器并返回模拟器。 // 与simulation.alphaTarget或simulation.alpha一起使用时，此方法可用于在交互 // 过程中进行“重新加热”模拟，例如在拖动节点时，在simulation.stop暂停之后恢复模 // 拟。 if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
} // 定义拖拽中的动作 function dragged(d) { d.fx = d3.event.x;
d.fy = d3.event.y;
} // 定义拖拽结束的动作 function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
} </script>
至此，力导向图解析完毕，这篇中有很多关于力学的专业的功能函数，理解起来有点难度。今天周日，起床后第一件事就是把这篇完结了，欧耶~
这篇文
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：csdn
原文链接：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
input失去焦点和获得焦点
鼠标在搜索框中点击的时候里面的文字就消失了。
我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件，因为懒，每次都去写非常的烦，于是就一劳永逸，遇到类似情况就来调用一下就OK 了
相关js代码:
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#username').focus(function ()//得到教室时触发的时间
{
$('#username').val('');
})
$('#username').blur(function () 失去焦点时触发的时间
{
if ($('#username').val() == 'marry') {
$('#q').text('用户名已存在！')
}
else { $('#q').text('ok!') }
})
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：脚本之家
原文链接：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
ECharts中dataZoom组件及散点图的绘制
dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作。
可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。
dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。
dataZoom 的数据窗口范围的设置，目前支持两种形式：
百分比形式：参见 dataZoom.start 和 dataZoom.end。
绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。
dataZoom 组件现在支持几种子组件：
内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。
框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。
在代码中加入dataZoom组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码加入dataZoom组件</title>
<!--引入Echarts文件-->
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
var dom=document.getElementById("main");
var myChart=echarts.init(dom);
var app={};
var option=null;
//先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：
option = {
tooltip:{},//提示框
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'slider', //这个dataZoom组件是slider型dataZoom组件
xAxisIndex:0, //dataZoom-slider组件控制第一个XAxis
start: 10, //左边在10%位置
end: 60 //右边在60%位置
},
{
type: 'inside', //这个dataZoom组件是inside型dataZoom组件
xAxisIndex:0, //dataZoom-inslide组件控制第一个XAxis
start: 10, //左边在10%的位置
end: 60 //右边在60%的位置
},{
type:'slider',
yAxisIndex:0, //dataZoom-slider组件控制第一个yAxis
start:30,
end:80
},{
type:'inside',
yAxisIndex:0, //dataZoom-inside组件控制第一个yAxis
start:30,
end:80
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {//控制点的大小,(参数为data中第三列的数据)
return val[2] * 40; //用回调函数控制点的大小(请查看官方文档)
},
data: [//data中第三个参数控制点的大小
["14.616","7.241","0.896"],
["3.958","5.701","0.955"],
["2.768","8.971","0.669"],
["9.051","9.710","0.171"],
["14.046","4.182","0.536"],
["12.295","1.429","0.962"],
["4.417","8.167","0.113"],
["0.492","4.771","0.785"],
["7.632","2.605","0.645"],
["14.242","5.042","0.368"]
]
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
可以通过滑动滑轮实现图形的缩放
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本问下面有矢量图层设置的区域，和热力图层设置的热力图的效果，区域绘制效怎么设置详细内容可以访问 openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解，主要讲解的是热力图层效果实现。区域绘制只是为了效果更好看。好了，继续往下看
在 openlayers 中，图层是使用 layer 对象表示的，主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型，它们都是继承 Layer 类的。
前面两篇文章 我们讲了矢量图层 VectorLayer的常用的场景，这篇我们写一篇 HeatMapLayer 的使用。可以看下图所示的热力图实现效果。 放大缩小地图热力图效果。
var heatmapLayer = new ol.layer.Heatmap({ source: source,//热力图资源 opacity:1,//透明度，默认1 visible:true,//是否显示，默认trur zIndex:1,//图层渲染的Z索引,默认按图层加载顺序叠加 gradient:['#00f','#0ff','#0f0','#ff0','#f00'],//热图的颜色渐变 blur: 15,//模糊大小(像素为单位) radius: 8,//半径大小默认为8(像素为单位) extent:[100,30,104,40],//渲染范围，可选值，默认渲染全部 });
2.2.1 addHeatMap()方法详解：
HeatmapLayer
map 中
AppendFeatures()
2.2.2 addHeatMap()方法代码：
/**
* 添加热力图
*/ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "绵阳市" }, { name: "广安市" }, { name: "雅安市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "宜宾市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 广安市: { center: { lng: 106.619126, lat: 30.474142 } }, 绵阳市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自贡市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜宾市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); },
2.2.3 AppendFeatures()方法详解：
new Feature点new Point信息
2.2.4 AppendFeatures()方法代码：
/**
* 增加要素到热力图
*/ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } }
<template> <div id="app"> <div id="Map" ref="map"></div> </div> </template> <script> import "ol/ol.css"; import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; import { Tile as TileLayer, Heatmap as HeatmapLayer } from "ol/layer"; import Proj from "ol/proj/Projection"; import XYZ from "ol/source/XYZ"; import { Map, View, Feature, ol } from "ol"; import { Style, Stroke, Fill } from "ol/style"; import { Polygon, Point } from "ol/geom"; import { defaults as defaultControls } from "ol/control"; import { fromLonLat } from "ol/proj"; // 四川的边界数据文件 import areaGeo from "@/geoJson/sichuan.json"; export default { data() { return { map: null }; }, methods: { /**
* 初始化地图
*/ initMap() { this.map = new Map({ target: "Map", controls: defaultControls({ zoom: true }).extend([]), layers: [ new TileLayer({ source: new XYZ({ url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" }) }) ], view: new View({ center: fromLonLat([104.065735, 30.659462]), zoom: 6.5, maxZoom: 19, minZoom: 5 }) }); }, /**
* 设置区域
*/ addArea(geo = []) { if (geo.length == 0) { return false; } let features = []; geo.forEach(g => { let lineData = g.features[0]; let routeFeature = ""; if (lineData.geometry.type == "MultiPolygon") { routeFeature = new Feature({ geometry: new MultiPolygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } else if (lineData.geometry.type == "Polygon") { routeFeature = new Feature({ geometry: new Polygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } routeFeature.setStyle( new Style({ fill: new Fill({ color: "#4e98f444" }), stroke: new Stroke({ width: 3, color: [71, 137, 227, 1] }) }) ); features.push(routeFeature); }); // 设置图层 let routeLayer = new VectorLayer({ source: new VectorSource({ features: features }) }); // 添加图层 this.map.addLayer(routeLayer); }, /**
* 添加热力图
*/ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "绵阳市" }, { name: "广安市" }, { name: "雅安市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "宜宾市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 广安市: { center: { lng: 106.619126, lat: 30.474142 } }, 绵阳市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自贡市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜宾市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, /**
* 增加要素至热力图
*/ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } }, mounted() { this.initMap(); //初始化地图 this.addArea(areaGeo); //添加四川省的边界描边和填充 this.addHeatMap(); //添加热力图数据 } }; </script> <style lang="scss" scoped> // 此处非核心内容，已删除 </style>
//添加热力图层 this.map.addLayer(this.layer) //删除热力图层 this.map.removeLayer(this.layer)
//获取-设置，模糊大小 heatmapLayer.getBlur() heatmapLayer.setBlur(15) //获取-设置，渲染范围 heatmapLayer.getExtent() heatmapLayer.setExtent([100,30,104,40]) //获取-设置，热力图渐变色 heatmapLayer.getGradient() heatmapLayer.setGradient(['#00f','#0ff','#0f0','#ff0','#f00']) //获取-设置，最大级别 heatmapLayer.getMaxZoom() heatmapLayer.setMaxZoom(18) //获取-设置，最小级别 heatmapLayer.getMinZoom() heatmapLayer.setMinZoom(2) //获取-设置，透明度 heatmapLayer.getOpacity() heatmapLayer.setOpacity(0.5) //获取-设置，半径 heatmapLayer.getRadius() heatmapLayer.setRadius(5) //获取-设置，热力源 heatmapLayer.getSource() heatmapLayer.setSource(source) //获取-设置，是否可见 heatmapLayer.getVisible() heatmapLayer.setVisible(true) //获取-设置，图层的Z-index heatmapLayer.getZIndex() heatmapLayer.setZIndex(2) //绑定事件-取消事件 type事件类型，listener函数体 heatmapLayer.on(type,listener) heatmapLayer.un(type,listener)
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
Force-directed（力导向）图形绘制算法通过图形本身的结构（图中顶点与边的拓扑关系）计算出图形的层次，而不依赖于特定领域的知识。使用力导向算法绘制的平面图形通常比较美观，并且图中各条边之间的交叉尽可能的少。
本文对使用D3js绘制Foorce-Directed Graph（力导向图）的过程进行简要的介绍，以下面的逻辑图（包含6个节点和5条边）为例。
import json #nodes为图的节点集合 nodes = [{'name' : 'nodeA'},
{'name' : 'nodeB'},
{'name' : 'nodeC'},
{'name' : 'nodeD'},
{'name' : 'nodeE'},
{'name' : 'nodeF'}] #links为图的边集合，source为起点，target为终点 links = [{'source' : 0 , 'target' : 1},
{'source' : 0 , 'target' : 2},
{'source' : 0 , 'target' : 3},
{'source' : 0 , 'target' : 4},
{'source' : 0 , 'target' : 5}] #graph为逻辑图，由节点集合和边集合组成 graph = {'nodes' : nodes , 'links' : links} print json.dumps(graph) 上例的源码 force-directed-graph.html 及注释如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .link { stroke : #CCC; stroke-width : 2; } .node text { pointer-events : none; font-size : 12px; } svg { overflow : hidden; } </style> <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> <script src="http://libs.useso.com/js/d3/3.4.8/d3.min.js"></script> <script> var graph = {"nodes": [{"name": "nodeA"},
{"name": "nodeB"},
{"name": "nodeC"},
{"name": "nodeD"},
{"name": "nodeE"},
{"name": "nodeF"}], "links": [{"source": 0, "target":1},
{"source": 0, "target": 2},
{"source": 0, "target": 3},
{"source": 0, "target": 4},
{"source": 0, "target": 5}]}; //返回随机颜色代码 function random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
} return color;
} function draw() { var width = 400; var height = 300; //设置svg宽度和高度 var svg = d3.select("#canvas svg")
.attr("width", width)
.attr("height", height); //设置Force-Directed力参数 var force = d3.layout.force()
.gravity(.05)
.distance(120)
.charge(-100)
.size([width, height]);
force
.nodes(graph.nodes)
.links(graph.links)
.start(); //选择边集合 var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link"); //选择节点集合 var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag); //响应鼠标拖拽事件 //节点添加圆形图案 node.append("svg:circle").attr("r", 10)
.style("fill", function(){ return random_color();
})
.style("stroke", "#FFF").style("stroke-width", 3);
node.append("text")
.attr("dx", 12)
.attr("dy", ".36em")
.text(function(d) { return d.name }); //绑定tick事件 force.on("tick", function() { 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; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
}
$(function(){ draw();
}); </script> </head> <body> <div id="canvas"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300"></svg> </div> </body> </html>
本文链接：http://bookshadow.com/weblog/2014/11/04/d3js-force-directed-graph/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com