Question

目前我成功获得了一年的静态地图，但我希望有一个下拉列表，以便选择一年，然后更新地图。

最后斜线下面的代码部分是我尝试实现菜单的地方，但我真的卡在这里。我不知道为了获得动态地图，我必须达到/实施的具体步骤是什么。

<body>
<select id="dates-menu"></select>
<p class="loading">Chargement de la carte...</p>
<script src="d3.js"></script>
<script src="topojson.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>

var width = 960,
    height = 600;

var options = [
    {date: "2000", selected: "C2000"},
    {date: "2001", selected: "C2001"},
    {date: "2002", selected: "C2002"},
    {date: "2003", selected: "C2003"},
    {date: "2004", selected: "C2004"},
    {date: "2005", selected: "C2005"},
    {date: "2006", selected: "C2006"},
    {date: "2007", selected: "C2007"},
    {date: "2008", selected: "C2008"},
    {date: "2009", selected: "C2009"},
    {date: "2010", selected: "C2010"},
];


var color = d3.scale.threshold()
    .domain([-1985, -1400, -1000, -700, -300, -100, -25, -0])
    .range(["#7f0000", "#b30000", "#d7301f", "#ef6548", "#fc8d59", "#fdbb84", "#fdd49e", "#fee8c8", "#fff7ec"]);

var path = d3.geo.path()
    .projection(null)
    .pointRadius(1.5);

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


queue()
    .defer(d3.json, "CO2_light.json")
    .defer(d3.csv, "tdd_CO2_emissions.csv")
    .await(ready);

var centroid, CO2;

function showData() {
    var rateById = {};

    CO2.forEach(function(d) { rateById[d.ID] = +d[options.selected]; });

    svg.selectAll("path")
        .transition()
        .duration(750)
        .style("fill", function(d) { return color(rateById[d.properties.ID]); });
}

function prepareMap() {

    svg.selectAll("path")
        .data(topojson.feature(centroid, centroid.objects.CENTROID).features)
      .enter().append("path")
        .attr("class", "centerGrid")
        .attr("d", path);    

}


function ready(error, centroidData, CO2Data) {

    centroid = centroidData;
    CO2 = CO2Data;
    prepareMap();
    showData();
    d3.select(".loading").remove();

}

///////////////////////////////////////////////    
var menu = d3.select("#dates-menu")
    .on("change", change);

menu.selectAll("option")
    .data(options)
  .enter().append("option")
    .text(function(d) { return d.date; });

menu.property("value", 2000);

function change() {
    showData(options[this.selectedIndex]);
}
</script>
</body>

编辑 - 代码重写并部分工作
我认为，我以更常见的方式改变了架构，并取得了一些进展

queue()
    .defer(d3.json, "CO2_light.json")
    .defer(d3.csv, "tdd_CO2_emissions.csv")
    .await(ready);

function ready(error, centroid, CO2) {

    var rateById = {};

    CO2.forEach(function(d) { rateById[d.ID] = +d[options[0].selected]; });

    svg.selectAll("path")
        .data(topojson.feature(centroid, centroid.objects.CENTROID).features)    
      .enter().append("path")
        .attr("class", "centerGrid")
        .attr("d", path)
        .style("fill", function(d) { return color(rateById[d.properties.ID]); });

现在它在＆＃34;手动模式下工作＆＃34;：我在开始时设置了一年，并在更新时设置了另一个。

var menu = d3.select("#dates-menu")
    .on("change", change);

menu.selectAll("option")
    .data(options)
  .enter().append("option")
    .text(function(d) { return d.date; });

menu.property("value", 2000);

function change() {
    update(options[this.selectedIndex]);
}

function update(option) {
    var rateById = {};

    CO2.forEach(function(d) { rateById[d.ID] = +d[options[10].selected]; });

    svg.selectAll("path")
        .data(topojson.feature(centroid, centroid.objects.CENTROID).features)
        .style("fill", function(d) { return color(rateById[d.properties.ID]); });    
}

但我不知道如何使用update函数中的下拉列表实现所选值

CO2.forEach(function(d) { rateById[d.ID] = +d[options[10].selected]; });

它与change函数

的关联方式

编辑2：可以改进的工作版

var menu = d3.select("#dates-menu")
    .on("change", change);

menu.selectAll("option")
    .data(options)
  .enter().append("option")
    .text(function(d) { return d.date; });

menu.property("value", 2000);

function change() {
    dateSelect = options[this.selectedIndex];

    var rateById = {};

    CO2.forEach(function(d) { rateById[d.ID] = +d[dateSelect.selected]; });

    svg.selectAll("path")
        .data(topojson.feature(centroid, centroid.objects.CENTROID).features)
        .transition()
        .duration(500)
        .style("fill", function(d) { return color(rateById[d.properties.ID]); });
}

这一行dateSelect = options[this.selectedIndex];

附加了一个重大变化

这里是csv

中的数据样本

"ID","C2001","C2002","C2003","C2004","C2005","C2006","C2007","C2008","C2009","C2010","C2000"
6050,"-5.55753","-5.55914","-5.75444","-5.76307","-5.81660","-5.99361","-6.02150","-6.15979","-5.73530","-6.30509","-5.52990"
6051,"-5.55753","-5.55914","-5.75444","-5.76307","-5.81660","-5.99361","-6.02150","-6.15979","-5.73530","-6.30509","-5.52990"
6712,"-6.20892","-6.21072","-6.42891","-6.43855","-6.49835","-6.69611","-6.72727","-6.88176","-6.40753","-7.04410","-6.17806"

和topojson文件

{"type":"Topology","objects":{"CENTROID":{"type":"GeometryCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::53030"}},"geometries":[{"type":"Point","properties":{"ID":6050},"coordinates":[7363,9999]},{"type":"Point","properties":{"ID":6051},"coordinates":[7384,9999]},{"type":"Point","properties":{"ID":6712},"coordinates":[6154,9860]},{"type":"Point","properties":{"ID":6743},"coordinates":[6827,9860]}

关于动态等值线图的建议

0 个答案: