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

最新推荐文章于 2024-06-07 09:42:09 发布

空城_招Python数据处理

最新推荐文章于 2024-06-07 09:42:09 发布

阅读量7.2k

点赞数

分类专栏： data visualization—d3.js/R 文章标签： d3.js javascript 地图饼图

本文链接：https://blog.csdn.net/huozi07/article/details/45310865

版权

使用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 data

最低0.47元/天解锁文章

空城_招Python数据处理

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
D3.js制作地图等值线与饼图

使用D3.js在等值线地图上添加饼图。比如：各省颜色深浅可以表示公司在该省投资额，饼图大小代表该省的收入额，饼图各个扇形表示各个收入来源比例。代码效果图：源代码： stage1——changer china university map- var w = 1000; var h = 1000; var svg
复制链接

扫一扫

专栏目录