D3.js制作地图等值线与饼图

最新推荐文章于 2025-10-30 14:33:44 发布

原创

最新推荐文章于 2025-10-30 14:33:44 发布 · 7.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#d3.js #javascript #地图 #饼图

本文介绍了如何使用D3.js库创建一个结合等值线地图和饼图的数据可视化应用。通过地图的颜色深浅展示公司在各省份的投资额，而饼图则展示省份的收入总额及收入来源比例。

使用D3.js在等值线地图上添加饼图。比如：各省颜色深浅可以表示公司在该省投资额，饼图大小代表该省的收入额，饼图各个扇形表示各个收入来源比例。

代码效果图：

源代码：

<html>
<head>
    <meta charset="utf-8">
    <title>stage1——changer china university map-</title>
</head>
<style>

</style>
<body>
<script src="d3.js"></script>
<script>
    var w  = 1000;
    var h = 1000;
    var svg = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h)
            .append("g")
            .attr("transform", "translate(100,50)");
    var projection = d3.geo.mercator()
            .center([107, 31])
            .scale(800)
            .translate([w/2, h/2]);//移动投影起始点
    var path = d3.geo.path()
            .projection(projection);

    var color = d3.scale.log()
            .range(["#DFFFDF","#008000"]);
    d3.csv("provincedata1.csv", function(data) {
        color.domain([
            d3.min(data, function(d) { return d.value; }),
            d3.max(data, function(d) { return d.value; })
        ]);

        d3.json("china-demo.json", function (error, json) {

            for (var i = 0; i < data.length; i++) {//找父对象中的data

                var dataSta