Welcome aboard! We are happy you are here and wish you good net-raft!
// base on https://frontendcharts.com/react-d3-rotating-globe/
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
<style>
body
{
text-align: center;
}
#globe
{
width: 600px;
margin: 20px auto;
}
path
{
fill: #aaa;
stroke: #ddd;
stroke-width: 0.5;
}
</style>
</head>
<body>
<script type="text/babel">
class Globe extends React.Component {
constructor(props) {
super(props)
this.state = {
rotation: 0
}
}
render() {
let projection = d3.geoOrthographic()
.fitSize([this.props.size, this.props.size], this.props.geoJson)
.rotate([this.state.rotation])
let geoGenerator = d3.geoPath()
.projection(projection)
let pathString = geoGenerator(this.props.geoJson)
window.requestAnimationFrame(() => {
this.setState({
rotation: this.state.rotation + 0.4
})
})
return <svg width={this.props.size} height={this.props.size} >
<path d={pathString} />
</svg>
}
}
d3.json('https://codepen.io/frontendcharts/pen/JBprpp.js', (err, json) => {
let geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries)
ReactDOM.render(
<Globe geoJson={geoJson} size={400} />,
document.getElementById('app')
)
})
</script>
<div id="globe">
<div id="app"></div>
</div>
</body>
</html>
The most helpful REACT solutions
How to get client ip address using react ?REACT Click to see more ... 19.2K 421