d3實現中國地圖實時刷新地圖顏色.md

import React from 'react';
import ReactCharts from 'echarts-for-react';
import $ from 'jquery'
import './style.less';

export default class ChinaMap extends React.Component {
   constructor() {
      super();
      this.state = {
         colors: ["#1AC977", " #00D2AA", "#00D7E1", "#00AAE1", "#0082D2", "#0070B5"],
         features:[]
      }
   }

   componentDidMount() {
      this.paintChinaMap();
   }

   componentDidUpdate() {
      const colorArray = this.props.patientData.healthRate;
      let dataArray = [];
      let page = this;
      this.state.features.map((key,index)=>{
         let item = {};
         item.geometry = key.geometry;
         item.properties = key.properties;
         item.type = key.type;
         item.colorindex = colorArray[index+1];
         dataArray.push(item);
      });
      this.state.svg.selectAll("path").data(dataArray).attr("fill", function (d, i) {
         const proId = d.properties.id;
         const colorIndex = colorArray[proId];
         return page.state.colors[colorIndex];
      }).on("mouseout", function (d, i) {
         d3.select(this)
            .attr("fill", function (d, i) {
               const proId = d.properties.id;
               const colorIndex = colorArray[proId];
               return page.state.colors[colorIndex];
            })
            .attr("stroke-width", 0)
      });
   }

   paintChinaMap() {
      const colorArray = this.props.patientData.healthRate;
      let conWidth = $(".ChinaMap_chart").width();
      let width = conWidth;
      let height = conWidth / 1.3;
      let page = this;

      let svg = d3.select(this.refs.china_chart).append("svg")
         .attr("width", width)
         .attr("height", height)
         .append("g")
         .data(colorArray)
         .attr("transform", "translate(0,0)");
      let projection = d3.geo.mercator()
         .center([107, 31])
         .scale(750)
         .translate([width / 2, height / 2]);
      let path = d3.geo.path()
         .projection(projection);
      let color = d3.scale.category20();
      this.setState({
         svg:svg
      });

      d3.json("./js/json/china.json", function (error, root) {
         if (error)
            return console.error(error);
         let dataArray = [];
         root.features.map((key,index)=>{
            let item = {};
               item.geometry = key.geometry;
               item.properties = key.properties;
               item.type = key.type;
               item.colorindex = colorArray[index+1];
            dataArray.push(item);
         });
         page.setState({
            features: dataArray
         });
         svg.selectAll("path")
            .data(dataArray)
            .enter()
            .append("path")
            .attr("fill", function (d, i) {
               const proId = d.properties.id;
               const colorIndex = colorArray[proId];
               return page.state.colors[colorIndex];
            })
            .text(function (d) {
               return d.properties.name;
            })
            .attr("text", function (d, i) {
               return d.properties.name;
            })
            .attr("d", path)
            .on("mouseover", function (d, i) {
               d3.select(this)
                  .attr("stroke", "#fff")
                  .attr("stroke-width", 1)
            })
            .on("mouseout", function (d, i) {
               d3.select(this)
                  .attr("fill", function (d, i) {
                     const proId = d.properties.id;
                     const colorIndex = colorArray[proId];
                     return page.state.colors[colorIndex];
                  })
                  .attr("stroke-width", 0)
            });
      });
   }

   render() {
      return (
         <div ref="china_chart"></div>
      )
   }
}
複製代碼