javascript - D3 で多層マップを作成する

Question

topjson を使用して D3 マップをロードし、マップの色付けに使用するデータを含む別の CSV ファイルに結合しようとしています。複数のレイヤーを切り替えることはできますが、毎回マップを再描画する必要はありません。これを行う方法の手がかりを求めてボードを精査しましたが、理解できないようです。誰でも助けを提供できますか？

途中で CSV を動的に編集したい場合に備えて、CSV と JSON データを分けておきたいと思います。関連するクラスを一度に各国に追加するか、ユーザーが 3 つのボタンを切り替えるときにクラスを追加および削除したいと考えています。どちらも私にとってはうまくいきますが、それを行う方法がわかりません。

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

ここに私のコードのjfiddleがあります：http://jsfiddle.net/2H7Pm/ただし、JSONにいくつかの構文の問題があるようです。

ただし、サンプル マップは私の github で動作します: http://newamericafoundation.github.io/worldofdrones/

助けてくれてありがとう！