使用D3制作多層地圖

Question

我正在嘗試使用topjson加載D3地圖，並與一個單獨的CSV文件一起加入，該文件包含我想用來為地圖着色的數據。 我能夠在多個圖層之間切換，但是每次都不會重新繪制地圖。 我已經搜尋了董事會以獲取有關如何執行此操作的一些線索，但是我似乎無法弄清楚。 誰能提供任何幫助？

我想將CSV和JSON數據分開，以防我們要在旅途中動態編輯CSV。 我想一次將相關的類添加到每個國家，或者在用戶在三個按鈕之間切換時添加或刪除類。 不管是對我還是對我都起作用，我似乎無法弄清楚該怎么做。

var width = 945

var height = 550

var svg = d3.select('#content').append('svg').attr('width', width).attr('height', height);

var projection = d3.geo.mercator().scale(175);

var path = d3.geo.path().projection(projection);

var all_data = {};

var tierById = d3.map();

var quantize = d3.scale.quantize()
    .domain([0, 1])
    .range(d3.range(2).map(function(i) { return "tier" + i; }));

queue()
  .defer(d3.json, "data/world.json")
  .defer(d3.csv, "data/wod.csv")
  .await(setUpChoropleth);

function setUpChoropleth(error, json) {

  svg.append("g")
     .attr("class", "countries")
  .selectAll("path")
    .data(topojson.feature(json, json.objects.countries).features)
  .enter().append("svg:path")
    .attr("d", path);

} 

function drawTierI() {
  queue()
      .defer(d3.json, "data/world.json")
      .defer(d3.csv, "data/wod.csv", function(d) { tierById.set(d.id, +d.tier_i); })
      .await(ready);

  function ready(error, json) {
    svg.append("g")
        .attr("class", "countries")
      .selectAll("path")
        .data(topojson.feature(json, json.objects.countries).features)
      .enter().append("path")
        .attr("class", function(d) { return quantize(tierById.get(d.id)); })
        .attr("d", path);

  }
}

function drawTierII() {
  queue()
      .defer(d3.json, "data/world.json")
      .defer(d3.csv, "data/wod.csv", function(d) { tierById.set(d.id, +d.tier_ii); })
      .await(ready);

  function ready(error, json) {
    svg.append("g")
        .attr("class", "countries")
      .selectAll("path")
        .data(topojson.feature(json, json.objects.countries).features)
      .enter().append("path")
        .attr("class", function(d) { return quantize(tierById.get(d.id)); })
        .attr("d", path);

  }
}

function drawTierIIPlus() {
  queue()
      .defer(d3.json, "data/world.json")
      .defer(d3.csv, "data/wod.csv", function(d) { tierById.set(d.id, +d.tier_ii_plus); })
      .await(ready);

  function ready(error, json) {
    svg.append("g")
        .attr("class", "countries")
      .selectAll("path")
        .data(topojson.feature(json, json.objects.countries).features)
      .enter().append("path")
        .attr("class", function(d) { return quantize(tierById.get(d.id)); })
        .attr("d", path);

  }
}

$('button#tier_i').click(function (e) {
  $( "svg" ).empty();
  drawTierI();
});

$('button#tier_ii').click(function (e) {
  $( "svg" ).empty();
  drawTierII();
});

$('button#tier_ii_plus').click(function (e) {
  $( "svg" ).empty();
  drawTierIIPlus();
});

這是我的代碼的一個小提琴： http : //jsfiddle.net/2H7Pm/但是，我那里的JSON似乎有一些語法問題。

示例地圖確實可以在我的github上使用： http : //newamericafoundation.github.io/worldofdrones/

謝謝您的幫助！

Answer 1

您只需要選擇現有路徑，而不是在初始設置完蛋ro之后添加新路徑，例如

function drawTierI() {
  csv.forEach(function(d) { tierById.set(d.id, +d.tier_i); });

  function ready(error, json) {
    svg.selectAll("path")
        .attr("class", function(d) { return quantize(tierById.get(d.id)); })
        .attr("d", path);

  }
}

和其他功能類似。 您也不需要在每一步都重新加載JSON和CSV-上面的代碼假設您的CSV數據存儲在變量csv ，因此您將填充該變量：

var csv;
function setUpChoropleth(error, json, _csv) {
  csv = _csv;
  // rest of setup
}

那你就可以做

$('button#tier_i').click(function (e) {
  drawTierI();
});

更改顯示的變量，而無需先清空SVG。