javascript – 使用D3的欧洲互动图表

2023年10月20日 316次阅读

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

《javascript – 使用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文件,这就是我所看到的(如果我将鼠标移过法国)：
《javascript – 使用D3的欧洲互动图表》

在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：我不知道我是否应该改变这个问题,或者我是否必须打开另一个问题.
不管怎样,谢谢.

最佳答案 这不是您的答案的完整解决方案,但为您提供了我使用的一般模式.

>设置初始值,为界面准备场景
>呼叫数据到服务器并等待它到达
>绘制地图库,添加事件监听器以与用户交互
>根据用户操作筛选并选择适当的信息

设置初始值,为界面准备场景

加载脚本

    <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

绘制地图库,添加事件监听器以与用户交互
画地图.在“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 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的数据.

点赞