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文件。 Plunker不保存因为文件太大。这是europe.json文件，这就是我所看到的（如果我将鼠标移到法国上方）：

在script.js文件中是一段不起作用的代码（注释）。这是我第一次用地图制作图形。

好的，现在我不知道从哪里开始。例如，我如何根据所选国家/地区关联国家/地区名称？并过滤基准年和疾病的数据？有人可以帮我一把吗？

我知道我问了很多，但我不想要所有的代码，而是希望能够继续开发图表。

非常感谢

我几乎完成了图表，只有两件我无法解决的事情：传说和所选年份不会改变的国家的颜色。

此处代码为：PLUNKER

对于传说，我使用了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, 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

这不是你的答案的完整解决方案，但为你提供了我使用的一般模式。

设置初始值，为界面
将数据调用到服务器并等待它到达
绘制地图库，添加事件监听器以与用户交互
根据用户操作过滤并选择合适的信息

设置初始值，为界面

准备场景

加载脚本

    <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);

必读：Let’s Make a Map

呼叫数据到服务器并等待它到达 您必须等待所有数据或用户可以开始与其中一些数据进行交互并获取错误，未定义的值等等。

推荐：将您的地图库与您的数据分开。您可以更改地图和/或数据，而无需一遍又一遍地重新创建所有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

绘制地图库，添加事件监听器以与用户交互 画地图。添加事件监听器 on ＆＃34; mouseover＆＃34;和＆＃34; mouseout＆＃34;：

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 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

工具：Mister Nester

<强> 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的数据。

使用D3的欧洲交互式图表

1 个答案: