[D3JS] Add more map layer and color
Map and add more layer Color
2023-09-14 09:00:51 时间
import React, {Component} from 'react'; import * as d3 from 'd3'; import 'd3-geo'; import * as topojson from 'topojson'; import * as colorbrewer from 'colorbrewer'; const us = require('./us.json'); const width = 960; const height = 600; class Map extends Component { componentDidMount() { const svg = d3.select(this.refs.mountSvg) .append('svg') .attr('height', height) .attr('width', width); const path = d3.geoPath(); // define color var color = d3.scaleLinear() .domain([-100000, 500000]) .range(colorbrewer.Greens[6]); // Add nation layer svg.append('path') .datum(topojson.feature(us, us.objects.nation)) .attr('class', 'land') .attr('d', path); // add state layer svg.append('path') .datum(topojson.mesh(us, us.objects.states), (a,b) => a!==b) .attr('class', 'border state') .attr('d', path); // add counties and county layer svg.append("g") .attr("class", "counties") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .enter().append("path") .attr("class", "county") .attr("d", path) //add color .attr("fill", function(d) { const profit = d.properties.profit; if(profit) { return color(d.properties.profit); } }) } render() { const style = { width, height, border: '1px solid black', margin: '10px auto' }; return ( <div style={style} ref="mountSvg"></div> ); } } export default Map;
相关文章
- google map v3 地址定位器
- Java中List与Map初始化的一些写法
- [Javascript] Compare a Generator to Using Array Map and Filter
- [Functional Programming 101] Crocks.js -- when to use map and when to use chain?
- [D3JS] Add more map layer and color
- [RxJS] Transformation operator: map and mapTo
- [Immutable.js] Differences between the Immutable.js Map() and List()
- [Javascript] Chaining the Array map and filter methods
- [Javascript] Compare a Generator to Using Array Map and Filter
- [Immutable.js] Differences between the Immutable.js Map() and List()
- [Javascript] Modifying an Immutable.js Map()
- 微信小程序----map组件实现解析经纬度
- Scala集合List的常用方法:reverse/groupBy/sortBy/sortWith/iterator/map
- paip.提升性能---并行多核编程哈的数据结构list,set,map
- js中的map和set
- Hive基础07、Hive引入Map
- 几种常见容器比较和分析 hashmap, map, vector, list ...hash table
- STL-----map
- go map fatal error: concurrent map iteration and map write 读写锁与深度拷贝的坑
- aistudio 常规赛:钢铁缺陷检测挑战赛 经验总结,轻松复现map 47排名再度提升