Map - I

Path animation is inspirated by Mike Bostock, the man behind the D3js.

路径动画取经于 D3js 创始人 Mike Bostock。

By cliking on svg canvas, chart will switch from map to pie chart, or vice versa.

单击图形，图形会在地图和饼图中切换。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  
  <div id="box"></div>
  
  <script>
var statisticData = [
  {"name":"苍南县","id":"330327", gdp: 234},
  {"name":"洞头县","id":"330322", gdp: 123},
  {"name":"龙湾区","id":"330303", gdp: 45},
  {"name":"鹿城区","id":"330302", gdp: 200},
  {"name":"平阳县","id":"330326", gdp: 156},
  {"name":"瑞安市","id":"330381", gdp: 78},
  {"name":"泰顺县","id":"330329", gdp: 130},
  {"name":"文成县","id":"330328", gdp: 216},
  {"name":"永嘉县","id":"330324", gdp: 99},
  {"name":"瓯海区","id":"330304", gdp: 46},
  {"name":"乐清市","id":"330382", gdp: 159}
];

d3.json("330300.json", function (err, data) {
    var draw = createMap()
        .geoData(data)
        .statisticData(statisticData)
        .width(600)
        .height(500)
        .colorRange(["blue", "red"]);
    d3.select("#box").call(draw);
});

return d3.pie()
            .value(d => d.properties.weight)(geoData.features)
            .map(d => {
                d.color = color(d.value);
                return d;
            });
    }
    function pathTween (d1, precision) {
        return function () {
          var path0 = this,
              path1 = path0.cloneNode(),
              n0 = path0.getTotalLength(),
              n1 = (path1.setAttribute("d", d1), path1).getTotalLength();

// Uniform samapling of distance based on specified precision
            var distances = [0], // fist point
                i = 0, dt = precision / Math.max(n0, n1);

// points between 0 and 1
            while ((i += dt) < 1) { distances.push(i); }

// last point
            distances.push(1);

// compute point-interpolators at each distance
            var points = distances.map(function (t) {
                var p0 = path0.getPointAtLength(t * n0),
                    p1 = path1.getPointAtLength(t * n1);
                return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
            });

return function (t) {
                return t < 1 ?
                    "M " + points.map(function (p) { return p(t); }).join("L") :
                    d1;
            };
        };
    } // pathTween END
    function onClick () {
        var isMap = holder.node().classList.contains("map");
        
        if (isMap) {
            holder.classed("map", false);
            holder.transition()
                .duration(2000)
                .attr("transform", "translate(" +
                      [width / 2, height / 2] + ")");
            holder.selectAll("path")
                .each(function (dd) {
                    d3.select(this)
                        .transition()
                        .duration(2000)
                        .attrTween("d", pathTween(arc(dd), 4));
                });
                
            holder.selectAll("text")
                .transition()
                .duration(2000)
                .attr("x", d => arc.centroid(d)[0])
                .attr("y", d => arc.centroid(d)[1]);
        }
        else {
            holder.classed("map", true);
            holder.transition()
                .duration(2000)
                .attr("transform", "translate(" + [margin, margin] + ")");
            holder.selectAll("path")
                .each(function (dd) {
                    d3.select(this)
                        .transition()
                        .duration(2000)
                        .attrTween("d", pathTween(geoPath(dd.data), 4));
                });
            holder.selectAll("text")
                .transition()
                .duration(2000)
                .attr("x", d => geoPath.centroid(d.data.geometry)[0])
                .attr("y", d => geoPath.centroid(d.data.geometry)[1]);
        }
    } // onClick END
    
    function draw (selection) {
        projection = d3.geoMercator()
            .fitSize([width  - margin * 2, height  - margin * 2], geoData);
        geoPath = d3.geoPath()
            .projection(projection);

(function () {
            var min = Math.min(width, height) - 20,
                outerRadius = (min - 2 * margin) / 2;
            arc = d3.arc()
                .outerRadius(outerRadius)
                .innerRadius(outerRadius * 0.65);
        })();

var embedData = injectPieData (geoData, statisticData);

svg = selection
            .append("svg")
            .style("outline", "1px solid gray")
            .attr("width", width)
            .attr("height", height);
        holder = svg.append("g")
            .attr("class", "holder map")
            .attr("transform",
                  "translate(" + [margin, margin] + ")");
        holder.selectAll("path")
            .data(embedData)
            .enter()
            .append("path")
            .attr("fill", d => d.color)
            .attr("stroke", "lightgray")
            .attr("stroke-width", 1)
            .attr("d", d => geoPath(d.data));

holder.selectAll("text")
            .data(embedData)
            .enter()
            .append("text")
            .attr("x", d => geoPath.centroid(d.data.geometry)[0])
            .attr("y", d => geoPath.centroid(d.data.geometry)[1])
            .text(d => d.data.properties.name)
            .attr("text-anchor", "middle")
            .style("text-shadow", "1px 1px 1px white");

svg.on("click", onClick);
        
    } // function draw END
    
    // Getter-Setter functions
    draw.width = function (_) {
        if (!arguments.length) { return width; }
        width = _;
        return draw;
    };
    draw.height = function (_) {
        if (!arguments.length) { return height; }
        height = _;
        return draw;
    };
    draw.colorRange = function (_) {
        if (!arguments.length) { return colorRange; }
        colorRange = _;
        return draw;
    };
    draw.geoData = function (_) {
        if (!arguments.length) { return geoData; }
        geoData = _;
        return draw;
    };
    draw.statisticData = function (_) {
        if (!arguments.length) { return statisticData; }
        statisticData = _;
        return draw;
    };
    
    return draw;
}

</script>
</body>

https://d3js.org/d3.v4.min.js