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方法 参考之前基础篇章

```javascript

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