糖果智能开发_金沙糖果派对游戏 糖果智能开发_金沙糖果派对游戏

BBIN糖果派对智能MG

BIGEMPA Js API示例中心

智能源代码展示

代码编辑区 运行 下载 还原
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>
</head>
<style>
#map {
width: 800px;
height: 500px;
background: #fff;
}
.tip {
font-size: 40px;
color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="tip">智能数据请前往bigemap智能下载器进行下载</div>
<div id="map"></div>
</body>
<script>
d3.json('/Public/d3json/demo12.json').then((data) => {
//获取智能数据
var root = data
//定义画布宽高
var width = 800;
var height = 500;
//画布
var svg = d3.select("#map").append('svg')
.attr('id', "mapSvg")
.attr('width', width)
.attr('height', height);
//定义墨卡托中大奖
var projection = d3.geoMercator()
.center([5, 32])
.scale(140)
.translate([width / 2, height / 2]);
//定义绘制路劲
var path = d3.geoPath()
.projection(projection);
//添加分组
var mapG = svg.append('g')
.attr('id', "mapG");
var color = d3.scaleOrdinal(d3.schemeCategory10)
//开始绘制智能
mapG.selectAll("path")
.data(root.features)
.enter()
.append("path")
.attr("class", "map-path")
.attr("stroke", "#212121")
.attr("stroke-width", 1)
.attr("fill", (d, i) => color(i))
.attr("style", "display:block")
.attr("d", path);
svg.append("g").attr("id", "pointG")
pushData();
//创建数据
function pushData() {
var data = [
{
from: [161.71533203124997, -10.387304687499991],
to: [117.1115, 40.7071]
},
{
from: [117.5744140625001, 4.17060546875004],
to: [115.2686, 30.6628]
},
{
from: [90.31328125000007, 47.676171874999994],
to: [112.6758, 30.9979]
},
{
from: [129.71972656249997, 42.47500000000005],
to: [121.01931115058903, 23.436683457875347]
},
{
from: [-85.73383789062493, 68.630126953125],
to: [91.1865, 30.1465]
},
{
from: [-63.938574218750006, -12.529687499999994],
to: [115.2686, 30.6628]
},
{
from: [15.000683593750011, 46.6259765625],
to: [99.613, 24.0546]
},
{
from: [106.75341796875003, 20.73505859375004],
to: [117.1115, 40.7071]
},
];
var index = 1;
//定时器
setInterval(function () {
var n = data.length * Math.random();
n = parseInt(n);
if (n > 7) {
n = 7
}
var p = d3.select('#pointG').append('svg').attr('id', 'paper' + index);
runAttack('paper' + index, data[n]);
index++
}, 400);
}
//绘制打点及连线
function runAttack(id, data) {
var height = 500;
var width = 800;
var s = Snap('#' + id);
var projection = d3.geoMercator()
.center([5, 32])
.scale(140)
.translate([width / 2, height / 2]);
function makePro(arr) {
var centroid = projection(arr),
x = centroid[0],
y = centroid[1];
return [x, y]
}
var circleF = s.circle(makePro(data.from)[0], makePro(data.from)[1], 0);
var circleT = s.circle(makePro(data.to)[0], makePro(data.to)[1], 0);
var lineL = s.line(makePro(data.from)[0], makePro(data.from)[1], makePro(data.from)[0], makePro(data.from)[1]);
circleF.attr({
fill: "rgba(0,0,0,0)",
stroke: "r()rgba(24,255,253,0.5)-#34A1FF",
'stroke-width': "5px"
});
circleT.attr({
fill: "#18FFFD",
stroke: "r()#34A1FF-rgba(24,255,253,0.5)",
'stroke-width': "8px"
});
lineL.attr({
stroke: "L(" + makePro(data.to)[0] + "," + makePro(data.to)[1] + "," + makePro(data.from)[0] + "," + makePro(data.from)[1] + ")#18FFFD-rgba(0,225,132,0.1)",
'stroke-width': "1px",
fill: "rgba(0,0,0,0)"
});
circleF.animate({ r: 20, 'stroke-width': "1px" }, 600, function () {
circleF.remove();
});
lineL.animate({ x2: makePro(data.to)[0], y2: makePro(data.to)[1] }, 500, mina.easeinout, function () {
lineL.animate({ x1: makePro(data.to)[0], y1: makePro(data.to)[1], 'stroke-width': '0' }, 500, mina.easein, function () {
lineL.remove();
})
circleT.animate({ r: 10 }, 1000, function () {
circleT.remove();
s.remove();
})
});
}
})
</script>
</html> 
泛亚官网平台开户bob综合体育官网电子游戏网站beplay体育下载地址