React & D3 v4 example - Responsive Maps

README.md

React と D3 ver.4 組み合わせて使うサンプル。

まだ、試行錯誤中。

Made with blockup-react

ChartComponents.js

import React, { Component } from "react";
import * as d3 from "d3";

function D3blackbox(d3render) {
  return class Blackbox extends Component {
    componentDidMount() {
      d3render.call(this);
    }
    componentDidUpdate() {
      d3render.call(this);
    }

    render() {
      const transform = this.props.transform || "";
      return <g transform={transform} ref="anchor" />;
    }
  };
}

export const Boundary = D3blackbox(function() {
  const GeoPath = d3.geoPath().projection(this.props.projection)
  
  const parent = d3.select(this.refs.anchor);

  const current = parent.selectAll(".boundary").data(this.props.GeoJSON.features);
  
   
  const enter = current.enter().append("path").classed("boundary", true);

  
  const path = current.merge(enter)
  
  path.attr("d", GeoPath)

  
});

export const Graticule = D3blackbox(function() {


  const GeoPath = d3.geoPath().projection(this.props.projection);
  const graticule = d3.geoGraticule();
  
  const parent = d3.select(this.refs.anchor);

  const current = parent.selectAll(".graticule").data([null]);
  
  const enter = current.enter().append("path").classed("graticule", true)
  
  const path = current.merge(enter)
  

  path.datum(graticule)
        .attr("d", GeoPath)

});

DataHandling.js

import * as d3 from "d3";

export const loadAllData = (callback = () => {} ) => {
    const q = d3.queue()
    
    q.defer(d3.json, './tokyo.geojson')
     
     q.await((error, data)  =>{
        callback(data);
    })   
}

dist.css

body,html{width:100%;height:100%;padding:0;margin:0}.mapsLayer .boundary{fill:green;stroke:#fff}.mapsLayer .graticule{fill:none;stroke:grey}

Maps.js

import React, { Component } from "react";
import * as d3 from "d3";
import { Boundary ,Graticule} from "./ChartComponents.js";

class Maps extends Component {
  constructor(props) {
    super();

    
  }
  
  updatePlotSize(props){
    const plotWidth =
      props.width - (props.margin.left + props.margin.right);
    const plotHeight =
      props.height - (props.margin.top + props.margin.bottom);
      
      return {plotWidth, plotHeight}
    
  }
  
  updateMapProjection(GeoJSON, plotWidth, plotHeight){
    var projection = d3.geoMercator()
      .fitExtent([[0, 0], [plotWidth, plotHeight]], GeoJSON);
      
    return projection
      
  }

  render() {

    const {plotWidth, plotHeight} = this.updatePlotSize(this.props);

    const projection = this.updateMapProjection(this.props.GeoJSON, plotWidth, plotHeight);
    
  
    const metaData = {
      plotWidth: plotWidth,
      plotHeight: plotHeight,
    };

    const plotData = {
      GeoJSON:this.props.GeoJSON,
      projection:projection
    }
    
    return (
      <svg width={this.props.width} height={this.props.height}>
        <g
          className="mapsLayer"
          width={plotWidth}
          height={plotHeight}          
          transform={`translate(${this.props.margin.left},${this.props.margin.top})`}
        >
          <Boundary {...metaData} {...plotData}/>
        </g>
      </svg>
    );
  }
}

export default Maps;

dist.js

index.html

package-lock.json

package.json

preview.jpg

script.js

style.styl

thumbnail.png

tokyo.geojson

yarn.lock