标签：r1 svg symbol js arcgis let data d3 圆环

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

标签：r1,svg,symbol,js,arcgis,let,data,d3,圆环
来源： https://www.cnblogs.com/haibalai/p/15827316.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。