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
上一篇:Learn D3 入门文档:Joins


下一篇:图形化开发(二)03-D3.js之基本使用——选择-select()、插入-append()末尾插入和insert()前面插入、删除元素-remove()