使用D3创建分级符号映射 [英] Create a Graduated Symbol Map using D3

查看：149
本文介绍了使用D3创建分级符号映射的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建毕业的符号图，并且正在努力找到一种方法来使这发生。我可以创建饼图，我可以创建一个符号图，但如何在地图上的特定坐标放置饼图？



我已经成功地将比例符号正确的坐标，但我不知道如何用饼图替换符号。每次尝试都会留下一张空白的地图。



我试图合并Mike Bostock的 Pie Multiples example with his Symbol Map example but have have



Index.html 



 <！DOCTYPE html> 
< html> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< title>毕业符号地图< / title> 
< script type =text / javascriptsrc =http://d3js.org/d3.v3.min.js>< / script> 
< script type =text / javascriptsrc =http://d3js.org/topojson.v1.min.js>< / script> 
< script type =text / javascriptsrc =http://d3js.org/queue.v1.min.js>< / script> 
< style type =text / css> 
 
 body {
 text-align：center; 
} 
 
< / style> 
< / head> 
< body> 
< script type =text / javascript> 
 
 var width = 400，
 height = 500; 
 
 var radius = d3.scale.sqrt（）
 .domain（[0，5e5]）
 .range（[0，40]）; 
 
 //定义地图投影
 var projection = d3.geo.transverseMercator（）
 .rotate（[72.57，-44.20]）
 .translate（[175,190 ]）
 .scale（[12000]）; 
 
 //定义路径生成器
 var path = d3.geo.path（）
 .projection（projection）; 
 
 //创建SVG元素
 var svg = d3.select（body）append（svg）
 .attr（width，width）
 .attr（height，height）; 
 
 queue（）
 .defer（d3.json，vermont.json）
 .defer（d3.json，fed.json）
。 await（ready）
 
 function ready（error，vt，centroid）{
 svg.append（path）
 .attr（class，towns）
 .datum（topojson.feature（vt，vt.objects.vt_towns））
 .attr（d，path）
 .style（stroke，#ddd）
 .style（stroke-width，1px）
 .style（fill，#ccc）; 
 
 svg.append（path）
 .datum（topojson.feature（vt，vt.objects.lake））
 .attr（d，path）
 .style（stroke，＃89b6ef）
 .style（stroke-width，1px）
 .style（fill，＃b6d2f5）; 
 
 svg.selectAll（。symbol）
 .data（centroid.features.sort（function（a，b）{
 return b.properties.dollars  -  a。 property.dollars;}））
 .enter（）。append（path）
 .attr（class，symbol）
 .attr（d pointRadius（function（d）{
 return radius（d.properties.dollars）;}）
）
 .style（fill，＃509e2f）
 .style （stroke，#ddd）
 .style（fill-opacity，0.7）; 
} 
 
< / script> 
< / body> 
< / html>



fed.json（共有14分，全部格式相同）



'dollars'是四个组织花费的总金额，饼图的大小应与此值相关。

  {
type：Feature，
id：53，
geometry：{
type： Point，
coordinates：[-73.1349605，43.0278745] 
}，
properties：{
name：Bennington County，
 dollars：79730，
unit：county，
ECP：49608，
LIP：3451，
NAP：0，
SURE：26671 
} 
}，



vermont.json >

大文件，映射不是问题。




$ b

解决方案

这里是我的解决方案，使用@ LarsKotthoff的答案从这个问题来解决投影问题。



index.html




下面是就绪函数。其他一切都保持不变。

 函数就绪（error，vt，centroid）{
 svg.append ）
 .attr（class，towns）
 .datum（topojson.feature（vt，vt.objects.vt_towns））
 .attr（d 
 .style（stroke，#ddd）
 .style（stroke-width，1px）
 .style（fill，#ccc）; 
 
 svg.append（path）
 .datum（topojson.feature（vt，vt.objects.lake））
 .attr（d，path）
 .style（stroke，＃89b6ef）
 .style（stroke-width，1px）
 .style（fill，＃b6d2f5）; 
 
 var pieArray = []，
 pieMeta = [] 
 
 function pieData（）{
 for（var i = 0; i  pieArray.push（[
 parseInt centroid.features [i] .properties.ECP），
 parseInt（centroid.features [i] .properties.LIP），
 parseInt（centroid.features [i] .properties.NAP），
 parseInt（centroid.features [i] .properties.SURE）
]）; 
 pieMeta.push（[
 projection（centroid.features [i] .geometry.coordinates），
 radius（parseInt（centroid.features [i] .properties.dollars））
]）; 
} 
 return [pieArray，pieMeta]; 
}; 
 
 var svgSvg = d3.select（body）。select（svg）。selectAll（g）
 .data（pieData（）[0]）
 .enter（）。append（svg：svg）
 .attr（width，width）
 .attr（height，height）
 .append（svg： g）
 .style（opacity，0.8）
 .attr（property，function（d，i）{
 return pieData（）[1] [i] [1 ]; 
}）
 .attr（transform，function（d，i）{
 var coordinates = pieData（）[1] [i] [0]; 
 return（translate（+（coordinates [0]）+，+ 
（coordinates [1]）+））; 
}）; 
 
 svgSvg.selectAll（path）
 .data（d3.layout.pie（））
 .enter（）。append（svg：path）
 .attr（d，d3.svg.arc（）
 .innerRadius（0）
 .outerRadius（function（d）{
 var chartList = d3.select parentNode）.attr（property）; 
 return chartList; 
}））
 .style（fill，function（d，i）{return color [i];} ; 
 
}


I'm trying to create a graduated symbol map and am struggling to find a way to make this happen. I can create pie charts and I can create a symbol map, but how to place pie charts at specific coordinates on a map?

I've successfully placed proportional symbols at the proper coordinates, but I can't figure out how to replace the symbols with pie charts. Every attempt leaves me with an empty map.

I've tried to merge Mike Bostock's Pie Multiples example with his Symbol Map example but have instead only managed to expose my lack of understanding of d3's data and event functions.

Index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Graduated Symbol Map</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
    <style type="text/css">

body {
text-align: center;
}

    </style>
</head>
<body>
    <script type="text/javascript">

var width = 400,
    height = 500;

var radius = d3.scale.sqrt()
    .domain([0, 5e5])
    .range([0, 40]);

// Define map projection
var projection = d3.geo.transverseMercator()
    .rotate([72.57, -44.20])
    .translate([175,190])
    .scale([12000]);

// Define path generator
var path = d3.geo.path()
    .projection(projection);

// Create SVG Element
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "vermont.json")
    .defer(d3.json, "fed.json")
    .await(ready)

function ready(error, vt, centroid) {
    svg.append("path")
        .attr("class", "towns")
        .datum(topojson.feature(vt, vt.objects.vt_towns))
        .attr("d", path)
        .style("stroke", "#ddd")
        .style("stroke-width", "1px")
        .style("fill", "#ccc");

    svg.append("path")
        .datum(topojson.feature(vt, vt.objects.lake))
        .attr("d", path)
        .style("stroke", "#89b6ef")
        .style("stroke-width", "1px")
        .style("fill", "#b6d2f5");

    svg.selectAll(".symbol")
        .data(centroid.features.sort(function(a,b) {
            return b.properties.dollars - a.properties.dollars; }))
        .enter().append("path")
            .attr("class", "symbol")
            .attr("d", path.pointRadius(function(d) {
                return radius(d.properties.dollars); })
            )
            .style("fill", "#509e2f")
            .style("stroke", "#ddd")
            .style("fill-opacity", 0.7);
}

    </script>
</body>
</html>

fed.json (there are 14 points, all with the same format)

'dollars' are the total dollars spent by the four organizations, the size of the pie chart should relate to this value.

{
    "type": "Feature",
    "id": "53",
    "geometry": {
        "type": "Point",
        "coordinates": [-73.1349605, 43.0278745]
    },
    "properties": {
        "name": "Bennington County",
        "dollars": 79730,
        "unit": "county",
        "ECP": 49608,
        "LIP": 3451,
        "NAP": 0,
        "SURE": 26671
    }
},

vermont.json

Large file, map is not the issue.

References I've used

解决方案

Here's my solution, using @LarsKotthoff's answer from this question to solve the projection issue.

I've scaled the pie charts in a rather hackish way.

index.html

Below is just the ready function. Everything else has remained unchanged.

function ready(error, vt, centroid) {
    svg.append("path")
        .attr("class", "towns")
        .datum(topojson.feature(vt, vt.objects.vt_towns))
        .attr("d", path)
        .style("stroke", "#ddd")
        .style("stroke-width", "1px")
        .style("fill", "#ccc");

    svg.append("path")
        .datum(topojson.feature(vt, vt.objects.lake))
        .attr("d", path)
        .style("stroke", "#89b6ef")
        .style("stroke-width", "1px")
        .style("fill", "#b6d2f5");

    var pieArray = [],
        pieMeta = [];

    function pieData() {
        for (var i=0; i<centroid.features.length; i++) {
            pieArray.push([
                parseInt(centroid.features[i].properties.ECP),
                parseInt(centroid.features[i].properties.LIP),
                parseInt(centroid.features[i].properties.NAP),
                parseInt(centroid.features[i].properties.SURE)
                ]);
            pieMeta.push([
                projection(centroid.features[i].geometry.coordinates),
                radius(parseInt(centroid.features[i].properties.dollars))
                ]);
        }
        return [pieArray, pieMeta];
    };

    var svgSvg = d3.select("body").select("svg").selectAll("g")
            .data(pieData()[0])
        .enter().append("svg:svg")
            .attr("width", width)
            .attr("height", height)
        .append("svg:g")
            .style("opacity", 0.8)
            .attr("property", function (d,i) {
                return pieData()[1][i][1];
            })
            .attr("transform", function (d,i) {
                var coordinates = pieData()[1][i][0];
                return ("translate(" + (coordinates[0]) + "," +
                    (coordinates[1]) + ")");
                });

    svgSvg.selectAll("path")
            .data(d3.layout.pie())
        .enter().append("svg:path")
            .attr("d", d3.svg.arc()
                .innerRadius(0)
                .outerRadius(function (d) {
                    var chartList = d3.select(this.parentNode).attr("property");
                    return chartList;
                }))
            .style("fill", function(d, i) { return color[i]; });

}

这篇关于使用D3创建分级符号映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆