使用D3的欧洲交互式图形

Question

我需要在D3中创建一个这样的图表：

​

一张欧洲地图(这里用正方形代替国家)，其国家根据当年被选择的死亡人数(由选择的疾病引起)着色。

颜色越深，死亡人数越多(如传说中所描述)。

用户可以选择更喜欢使用滑块的年份，也可以使用单选按钮选择疾病。根据年份和选定的疾病，各国的颜色发生变化。

当用户将鼠标滚动到某一特定国家(如法国)时，右侧出现一些细节，如：

• 国家
• 年
• 死亡总人数
• 按男性和女性分列的死亡人数

我的数据集是这样完成的：

"","Country","Year","Sex","Death","Value"
"3","Austria","2012","Male","Tuberculosis",18
"4","Austria","2012","Male","Tetanus",1
"5","Austria","2012","Male","Diphtheria",0
"1641","Austria","2012","Female","Tuberculosis",7
"1642","Austria","2012","Female","Tetanus",0
"1643","Austria","2012","Female","Diphtheria",0
"3409","Austria","2011","Male","Tuberculosis",27
"3410","Austria","2011","Male","Tetanus",0
"3411","Austria","2011","Male","Diphtheria",0
"5047","Austria","2011","Female","Tuberculosis",14
"5048","Austria","2011","Female","Tetanus",0
"5049","Austria","2011","Female","Diphtheria",0
"46829","Austria","1998","Male","Tuberculosis",61
"46830","Austria","1998","Male","Tetanus",0
"46831","Austria","1998","Male","Diphtheria",0
"48341","Austria","1998","Female","Tuberculosis",30
"48342","Austria","1998","Female","Tetanus",0
"48343","Austria","1998","Female","Diphtheria",0
"59309","Belgium","2010","Male","Tuberculosis",13
"59310","Belgium","2010","Male","Tetanus",0
"59311","Belgium","2010","Male","Diphtheria",0
"60947","Belgium","2010","Female","Tuberculosis",13
"60948","Belgium","2010","Female","Tetanus",2
"60949","Belgium","2010","Female","Diphtheria",0
...

我搜索了是否有任何类似的图形，我可以使用，但我没有发现任何。

我试图创建一个欧洲地图，这就是我得到的https://plnkr.co/edit/Ny0lUkVoiKeP76R95eVn?p=preview。

由于缺少europe.json文件，图表无法工作。柱塞不保存，因为文件太大。这是europe.json文件，这就是我所看到的(如果我把鼠标传递到法国)：

​

在script.js文件中，有一段代码(注释)不能工作。这是我第一次用地图绘制图形。

好吧，现在我不知道从哪里开始。例如，如何根据选定的国家将国家名称联系起来？并过滤基准年的数据和疾病？有人能帮我一把吗？

我知道我要求很多，但我不想要所有的代码，而是一个帮助，能够向前推进，以开发图表。

非常感谢

我几乎完成了图表，只有两件事我无法修复:传说和国家的颜色不会随着选定的年份而变化。

在这里，代码：柱塞

对于传说，我使用了吕素诗图书馆。传说是创造的，但不是彩色的。我试图改变范围，并使用我以前的颜色国家，但不起作用。

// to color countries
var colors = d3.scale.linear()
    .domain([0, 1, 2300]) 
    .range(["#cccccc","#131313", "#ba3c28"]);
/**
 * Legend.
 */
var quantize = d3.scale.quantize()
    .domain([0, 1, 2300])
    //.range(["#cccccc","#131313", "#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);

第二个问题是，如果用户使用滑块更改年份，则国家的颜色不会改变。我不明白如何更新滑块的值。在正确的数据是正确的。

有人能帮我吗？

PS:我不知道我是否正确地改变了这个问题，或者我是否不得不打开另一个问题。不管怎样，谢谢。

Answer 1

这不是一个完整的解决方案，你的答案，但给你一个一般的模式，我使用。

• 设置初始值，准备界面场景
• 向服务器调用数据并等待数据到达
• 绘制地图库，添加事件侦听器以与用户交互。
• 根据用户操作筛选并选择apropiate信息。

设置初始值，准备接口的场景

加载脚本

    <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

必读：队列

绘制映射库，添加事件侦听器与用户绘制映射进行交互。在上添加事件侦听器 "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", function(d) {
            d3.select("#coun"+d.properties.indx).style('stroke', 'ddd').style("stroke-width",1)
            $("#info").html("")
        })      
};

必读：TopoJSON

工具：TopoJSON地图 - Letfleat地图工具

筛选并选择apropiate信息，取决于用户操作，您有两种类型的交互：

• 一个国家的用户(showInfo函数)
• 用户选择去海或年份(更新功能)

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数据 - 阵列API - D3在csv数据中的应用 - 数据读取

工具：内斯特先生

PS:

我已经更改了您的.csv，添加了一个列来将.topojson国家代码绑定到.csv：

indx,id,Country,Year,Sex,Death,Value
4,3,Austria,2012,Male,Tuberculosis,18
4,4,Austria,2012,Male,Tetanus,1
4,5,Austria,2012,Male,Diphtheria,0
4,1641,Austria,2012,Female,Tuberculosis,7
4,1642,Austria,2012,Female,Tetanus,0
4,1643,Austria,2012,Female,Diphtheria,0
4,3409,Austria,2011,Male,Tuberculosis,27
4,3410,Austria,2011,Male,Tetanus,0
4,3411,Austria,2011,Male,Diphtheria,0
4,5047,Austria,2011,Female,Tuberculosis,14
4,5048,Austria,2011,Female,Tetanus,0
4,5049,Austria,2011,Female,Diphtheria,0
4,46829,Austria,1998,Male,Tuberculosis,61
4,46830,Austria,1998,Male,Tetanus,0
4,46831,Austria,1998,Male,Diphtheria,0
4,48341,Austria,1998,Female,Tuberculosis,30
4,48342,Austria,1998,Female,Tetanus,0
4,48343,Austria,1998,Female,Diphtheria,0
2,59309,Belgium,2010,Male,Tuberculosis,13
2,59310,Belgium,2010,Male,Tetanus,0
2,59311,Belgium,2010,Male,Diphtheria,0
2,60947,Belgium,2010,Female,Tuberculosis,13
2,60948,Belgium,2010,Female,Tetanus,2
2,60949,Belgium,2010,Female,Diphtheria,0

每个国家都有一个代码(indx)，所以当您选择一个国家时，传递代码以过滤csv中的数据。