[D3] Draw a basic US d3-geo map
Map Basic D3 Geo draw US
2023-09-14 08:59:18 时间
Install:
npm install --save d3 d3-geo topojson
Code:
import React, {Component} from 'react'; import * as d3 from 'd3'; import 'd3-geo'; import * as topojson from 'topojson'; 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(); svg.append('path') .datum(topojson.feature(us, us.objects.states)) .attr('class', 'land') .attr('d', path); } render() { const style = { width, height, border: '1px solid black', margin: '10px auto' }; return ( <div style={style} ref="mountSvg"></div> ); } } export default Map;
Github: Link
相关文章
- go在并发情况下使用map
- Go语言基础之map
- js es6 map weakmap
- [Typescript] Tips: Map over a union type
- [D3] Draw a basic US d3-geo map
- [Javascript] Ex: concatAll, map and filter
- ATITIT提升效率 保持简单性 优化 简化 目录 1.1. 概念简单1 1.2. 语言简单性 弱类型 动态变量 动态实体1 1.3. 数据结构简单 arr 代替了array map s
- Rxjs map, mergeMap 和 switchMap 的区别和联系
- Image Map Pro 5.5.0
- ML:分类预测任务中模型评估指标(ER/混淆矩阵ACC、Precision、Recall、AP、mAP、F1、ROC-AUC)简介、使用方法、代码实现、案例应用之详细攻略
- Map中的computeIfAbsent方法
- vue-cli的lib库模式下调试和不输出map文件