arcgis js 4 使用d3.js 构建扩散圆

我们使用d3.js 与arcgis 构建扩散圆

首先还是先定义数据结构

let options = {
renderer: {
type: “simple”,
symbol: {
r: 8,
color2: “#476db6”,
color1: “#0f46ab”,
width: “1.5”,
time: “1200”
}
},
data: [
{
geometry: [12702451.34188237, 2577586.8581332113],
attributes: {
name: “1号发散圆”
}
},
{
geometry: [12649387.05306244, 2562350.409717491],
attributes: {
name: “2号发散圆”
}
}
]
};
我们构建全局变量存储svg的圆

this.graphics = new Array(); //存储外圆环
this.centerCircles = new Array(); //存储中心圆
this.expanCircles = new Array(); //存储五个扩散圆环
this.poitChangeSvg = new Array();
根据数据构建

this.svg 是初始svg 全局容器 参考之前基础篇章
toScreen方法 参考之前基础篇章

let data = this.options.data;
for (let item of data) {
let svg = this.svg;
let symbol = this.options.renderer.symbol;

let r1 = symbol.r * 3; //外圆环真实的半径
let dis = r1/3; //扩散圆环半径差值
let data = [r1-dis,r1,r1+dis,r1+2*dis,r1+3*dis]; //构建扩散圆环半径数组
let max = Math.max(...data); //取得阈值
let scale = d3.scaleLinear()
.range([symbol.color2, symbol.color1]) //发散圆环颜色渐变范围
.domain([0, max]); //阈值，渐变消失的判断
//外圈的圆
let graphic = svg.append("circle");
graphic
.attr("r", r1)
.attr("fill", symbol.color1);
let r2 = r1 / 30 * 22;
//中心的圆
let centerCircle = svg.append("circle");
centerCircle
.attr("r", r2)
.attr("fill", symbol.color2);
//一组扩散圆环
let circles = svg.selectAll("body");
let expanCircle = circles.data(data)
.enter()
.append("circle")
//依次根据半径添加圆
.attr("r", function (d) {
return d;
})
.attr("fill", "none")
.style("stroke-width", symbol.width) //扩散圆环粗细
 更多参考 https://xiaozhuanlan.com/topic/2451973608