欧洲地图(这里使用正方形而非国家非常简化),其国家根据当年选择的死亡人数(由选择疾病引起)着色.
更多颜色是黑暗,死亡人数越多(如图例中所述).
用户可以选择喜欢使用滑块的年份,并可以使用单选按钮选择疾病.
根据年份和选定的疾病,国家的颜色变化.
当用户将鼠标悬停在特定国家(例如法国)上时,右侧会显示一些详细信息,例如：
>这个国家
>年
>总死亡人数
>死亡人数除以男性和女性
我的数据集是这样完成的：
"","Country","Year","Sex","Death","Value" "3","Austria","2012","Male","Tuberculosis",18 "4","Tetanus",1 "5","Diphtheria",0 "1641","Female",7 "1642",0 "1643",0 "3409","2011",27 "3410",0 "3411",0 "5047",14 "5048",0 "5049",0 "46829","1998",61 "46830",0 "46831",0 "48341",30 "48342",0 "48343",0 "59309","Belgium","2010",13 "59310",0 "59311",0 "60947",13 "60948",2 "60949",0 ...
我搜索了是否有任何类似的图形我可以使用,但我一无所获.
我试图创建一张欧洲地图,这就是我获得的https://plnkr.co/edit/Ny0lUkVoiKeP76R95eVn?p=preview.
该图表不起作用,因为它缺少europe.json文件. Plunker不保存因为文件太大.
这是europe.json文件,这就是我所看到的(如果我将鼠标移过法国)：
在script.js文件中是一段不起作用的代码(注释).
这是我第一次用地图制作图形.
好的,现在我不知道从哪里开始.
例如,我如何根据所选国家/地区关联国家/地区名称？
并过滤基准年和疾病的数据？
有人可以帮我一把吗？
我知道我问了很多,但我不想要所有的代码,而是能够继续开发图形的帮助.
非常感谢
我几乎完成了图表,只有两件我无法解决的事情：传说和所选年份不变的国家的颜色.
对于传说,我使用的是library of Susie Lu.
图例已创建但未着色.我试图改变范围,并使用我用来为国家着色的相同但不起作用.
// to color countries
var colors = d3.scale.linear()
.domain([0,1,2300])
.range(["#cccccc","#131313","#ba3c28"]);
/**
* Legend.
*/
var quantize = d3.scale.quantize()
.domain([0,2300])
//.range(["#cccccc","#ba3c28"]);
.range(d3.range(10).map(function(i) {
return "q" + i + "-10";
}));
var svg = d3.select("#leftDown")
.append("svg")
.attr("class","legendQuantsvg");
svg.append("g")
.attr("class","legendQuant")
.attr("transform","translate(20,20)");
var legend = d3.legend.color()
.labelFormat(d3.format(".0f"))
.useClass(true)
.scale(quantize);
svg.select(".legendQuant")
.call(legend);
第二个问题是,如果用户使用滑块更改年份,则国家/地区的颜色不会更改.
我不明白如何更新滑块的值.
在右侧,数据被正确采用.
有人能帮助我吗？
解决方法
>设置初始值,为界面准备场景
>呼叫数据到服务器并等待它到达
>绘制地图库,添加事件监听器以与用户交互
>根据用户操作筛选并选择适当的信息
设置初始值,为界面准备场景
加载脚本
<script src="js/d3.js" charset="utf-8"></script> D3 base
<script src="js/topojson.v1.min.js"></script> TopoJSON
<script src="js/d3-queue.v2.min.js"></script> Queue
<script src="js/jquery-2.2.4.min.js"></script> jQuery
HTML
<div id="selector"> <form id="desses"> <input type="radio" name="desse" value="tuberculosis" checked>Tuberculosis<br> <input type="radio" name="desse" value="tetanus">Tetanus<br> <input type="radio" name="desse" value="diphtheria">Diphtheria </form> </div> <input type="range" id="rango" value="2014" min=2004 max=2014> <div id="container"></div> <div id="info"></div>
JavaScript的
// width and height
var w = 800,h = 600,dess;
// define map projection
var projection = d3.geo.mercator()
.center([13,52])
.translate([w/2,h/2])
.scale([w/1.5]);
// define path generator
var path = d3.geo.path()
.projection(projection);
// create SVG
var svg = d3.select("#container")
.append("svg")
.attr("width",w)
.attr("height",h);
var div = d3.select("body").append("div")
.attr("class","tooltip")
.style("opacity",0);
呼叫数据到服务器并等待它到达
您必须等待所有数据或用户可以开始与其中一些数据进行交互并获取错误,未定义的值等.
推荐：将您的地图基础与您的数据分开.您可以更改地图和/或数据,而无需一遍又一遍地重新创建所有json.容易保持
d3_queue.queue()
.defer(d3.json,'data/europe.topojson') //<-- Topojson base map
.defer(d3.csv,'data/dessease.csv') //<-- dessease csv data
.awaitAll(makemap); // <-- When data arrives call makemap function
必读：Queue
绘制地图库,添加事件监听器以与用户交互
画地图.在“mouSEOver”和“mouSEOut”上添加事件监听器：
function makemap(error,europe,dessease) {
dess = dessease.slice()
counties = topojson.feature(europe,europe.objects.collection);
vector = svg.selectAll("path")
.data(counties.features)
.enter()
.append("path")
.attr("class","county")
.attr("id",function(d){
return "coun"+d.properties.indx})
.attr("d",path)
.on("mouSEOver",function(d) {
d3.select("#coun"+d.properties.indx).style('stroke','777').style("stroke-width",2)
showInfo(d)
})
.on("mouSEOut",'ddd').style("stroke-width",1)
$("#info").html("")
})
};
必读：TopoJSON
工具：TopoJSON Maps – Letfleat map tool
根据用户操作过滤并选择适当的信息
您有两种类型的互动：
>国家/地区的用户(showInfo函数)
>用户选择desseas或年份(更新功能)
使用Javascript
var showInfo = function (d) { // Populate the tooltip
var infonest = d3.nest()
.key(function(d) { return d.Year }) //<-- Filter selectors
.key(function(d) { return d.Sex; }) // Now you use
.map(dess); //<-- your csv data
$("#info").html($("#rango").val() + " - "+d.properties.name+" : "+JSON.stringify(infonest['1998']['Male']) ) // sample
}
var update = function () { // change map color based on values
var des = $('input[name=desse]:checked','#desses').val();
$("#info").html($("#rango").val()+ " : " + des)
}
$('#desses').on('change',update);
$("#rango").on("input",update);
d3.nest()它是处理数据和数据子集的D3最强大的功能之一.
必读：Groupin Data – Arrays API – D3 using nest on csv data – Reading in Data
PS：
我已经更改了.csv,添加了一个列以将.topojson国家/地区代码绑定到.csv：
indx,id,Country,Year,Sex,Death,Value 4,3,Austria,2012,Male,Tuberculosis,18 4,4,Tetanus,1 4,5,Diphtheria,0 4,1641,Female,7 4,1642,1643,3409,2011,27 4,3410,3411,5047,14 4,5048,5049,46829,1998,61 4,46830,46831,48341,30 4,48342,48343,0 2,59309,Belgium,2010,13 2,59310,59311,60947,60948,2 2,60949,0
