Random Displacement of Data Node

Developer
AaronChuo (小狂)
Size
3,075 Kb
Views
24,288
  1. Random Displacement of Data Node Previews
  2. Random Displacement of Data Node HTML Codes
  3. Random Displacement of Data Node CSS Codes
  4. Random Displacement of Data Node JS Codes

How do I make an random displacement of data node?

Designed by D3.js. What is a random displacement of data node? How do you make a random displacement of data node? This script and codes were developed by AaronChuo (小狂) on 21 August 2022, Sunday.

Random Displacement of Data Node Previews
IQ Test

Random Displacement of Data Node - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Displacement of Data Node</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Random Displacement of Data Node - Script Codes CSS Codes

g { cursor: pointer;
}
g:hover circle { fill: #F9C; transition: fill 200ms ease;
}
circle { fill: #99C;
}
path { stroke: #CCE;
}
text { fill: #FFF; text-anchor: middle;
}

Random Displacement of Data Node - Script Codes JS Codes

// Author: Aaron Cho (aka 小狂)
(function(d3) { 'use strict'; var dataset = [ {label: 'A'}, {label: 'B'}, {label: 'C'}, {label: 'D'}, {label: 'E'}, {label: 'F'}, {label: 'G'}, {label: 'H'}, {label: 'I'}, {label: 'J'}, {label: 'K'}, {label: 'L'}, {label: 'M'}, {label: 'N'} ]; var WIDTH = window.innerWidth, // 視窗寬 HEIGHT = window.innerHeight, // 視窗高 RADIUS = 10, // 節點半徑 X_BOUND = WIDTH - RADIUS, // 水平最大邊界 Y_BOUND = HEIGHT - RADIUS, // 垂直最大邊界 DISP = 0.05, // 單位位移量 DEFAULT_ACC = 5; // 預設加速度 var vis, reqId; init(); // 初始設置 function init() { for(var i = 0; i < dataset.length; i++) { dataset[i].x = (WIDTH - RADIUS * 2) / 2; dataset[i].y = (HEIGHT - RADIUS * 2) / 2; dataset[i].acc = 1; } vis = d3.select('#container') .append('svg:svg') .attr('width', WIDTH) .attr('height', HEIGHT); vis.append('svg:path'); vis.selectAll('g') .data(dataset) .enter() .append('svg:g') .on('mouseover', mouseOverHandler) .on('mouseout', mouseOutHandler) .append('svg:circle') .attr('r', RADIUS); vis.selectAll('g') .append('svg:text') .attr('dy', RADIUS / 2) .text(function(d) {return d.label;}); window.addEventListener('resize', resizeHandler); runAnimation(); } // mouse over事件處理 function mouseOverHandler() { d3.select(this).select('circle') .attr('r', RADIUS * 1.5); cancelAnimationFrame(reqId); } // mouse out事件處理 function mouseOutHandler() { d3.select(this).select('circle').attr('r', RADIUS); runAnimation(); } // 更新所有節點的座標 function updateData() { for(var i = 0; i < dataset.length; i++) { dataset[i].acc += Math.round(Math.random() * 3) / 10; dataset[i].x += dataset[i].xdir * dataset[i].acc; dataset[i].y += dataset[i].ydir * dataset[i].acc; } } // 取得線條的路徑值 function getPath() { var d = ''; for(var i = 0; i < dataset.length; i++) { var n = i + 1; for(var j = n; j < dataset.length && n < dataset.length; j++) { d += ' M ' + dataset[i].x + ' ' + dataset[i].y; d += ' L ' + dataset[j].x + ' ' + dataset[j].y; } } return d; } // 繪製圖形 function drawAll() { vis.selectAll('circle') .attr('cx', function(d, i) { return dataset[i].x; }) .attr('cy', function(d, i) { return dataset[i].y; }); vis.selectAll('text') .attr('transform', function(d, i) { return 'translate(' + dataset[i].x + ',' + dataset[i].y + ')'; }); vis.select('path').attr('d', getPath()); } // 當resize視窗會更新相關變數 function resizeHandler() { WIDTH = window.innerWidth; HEIGHT = window.innerHeight; X_BOUND = WIDTH - RADIUS; Y_BOUND = HEIGHT - RADIUS; vis.attr('width', WIDTH) .attr('height', HEIGHT); } // 判斷節點位置是否到達目標位置 function isArriveTarget(dir, current, target) { var isArrive; if(dir === DISP) { isArrive = (current >= target || !dir || !target) ? 1 : 0; } else { isArrive = (current <= target || !dir || !target) ? 1 : 0; } return isArrive; } // 執行動畫 function runAnimation() { for(var i = 0; i < dataset.length; i++) { if(isArriveTarget(dataset[i].xdir, dataset[i].x, dataset[i].tx) || isArriveTarget(dataset[i].ydir, dataset[i].y, dataset[i].ty)) { dataset[i].tx = Math.round(Math.random() * X_BOUND + RADIUS); dataset[i].ty = Math.round(Math.random() * Y_BOUND + RADIUS); dataset[i].xdir = dataset[i].tx > dataset[i].x ? DISP : -DISP; dataset[i].ydir = dataset[i].ty > dataset[i].y ? DISP : -DISP; dataset[i].acc = DEFAULT_ACC; } } updateData(); drawAll(); reqId = requestAnimationFrame(runAnimation); }
})(window.d3);
Random Displacement of Data Node - Script Codes
Random Displacement of Data Node - Script Codes
Home Page Home
Developer AaronChuo (小狂)
Username aaronchuo
Uploaded August 21, 2022
Rating 3
Size 3,075 Kb
Views 24,288
Do you need developer help for Random Displacement of Data Node?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AaronChuo (小狂) (aaronchuo) Script Codes
Name
The Heart
I drink and I know things
Glitch Image
Ramen by pure CSS
Gradient Color Spin
Radar Scanner
Chopper by pure CSS, no image, no javascript
Wave
Scifi-style Radio-based Tab
The Rocket
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!