zoukankan      html  css  js  c++  java
  • [D3JS] Add more map layer and color

    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;
     
  • 相关阅读:
    Codeforces Round #229
    A Funny Game(博弈论)
    01背包模板
    一月24日新生冬季练习赛解题报告H.排列问题
    一月24日新生冬季练习赛解题报告F.棋盘
    POJ 2240Arbitrage
    POJ 3660Cow Contest
    POJ 3259Wormholes
    POJ 1860Currency Exchange
    HDU 4027Can you answer these queries?
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7518591.html
Copyright © 2011-2022 走看看