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

여기 내 코드의 jfiddle입니다 : http://jsfiddle.net/2H7Pm/ 나는 그러나, 거기에 JSON 일부 구문 문제가있는 것 같다.

예지도 그러나 내 GitHub의에서 작동합니까 : 도움을 http://newamericafoundation.github.io/worldofdrones/

감사합니다!

Answer 1

choropleth의 초기 설정 후에 새 경로를 추가하는 대신 기존 경로를 선택하면됩니다. 예 :

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

    } 
} 

및 다른 기능들에 대해서도 마찬가지이다.

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

을 그럼 당신은 간단하게 할 수 있습니다 당신이 thusly 히 채울 것입니다 위의 코드가 CSV 데이터가 변수 csv에 저장되어 있다고 가정한다, - 당신도 각 단계에서 JSON과 CSV를 다시로드 할 필요가 없습니다 do

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

SVG를 먼저 비우지 않고도 표시된 변수를 변경할 수 있습니다.