我们使用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