d3.js Переходы GeoJSON

Я создал два объекта GeoJSON, и когда я проверяю элемент, я вижу их обоих в списке. Я просмотрел множество обучающих программ по переходу на d3.js, и я все еще теряю их, как рисовать, а затем переходить на другой.d3.js Переходы GeoJSON

Я попытался реализовать функцию exit(). Remove() во втором объекте geoJSON, но не смог выполнить эту работу. Я очень потерялся и не могу ничего сделать, что нашел работу.

Я понимаю, что приведенный ниже код очень прост, но все, что я пробовал, провалилось за этот момент.

<head> 
<meta charset="utf-8"> 
<title>Cartogram 1</title> 
<style> 
</style> 
<svg width="100" height="2"></svg> 
<script type="text/javascript" src="js/d3.v3.js"></script> 
<script> 

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

    var projection = d3.geo.equirectangular();  

    var world1 = d3.json("world2.json", function (data) { 

     svg.selectAll("g") 
     .data(data.features) 
     .enter() 
     .append("g") 
     .append("path") 
     .attr("d", path)}); 

    var world2 = d3.json("goldatt2.json", function (data) { 

     svg.selectAll("h") 
     .data(data.features) 
     .enter() 
     .append("h") 
     .append("path") 
     .attr("d", path)});  

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


</script>

Это было изменено на:

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

    var projection = d3.geo.equirectangular() 

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

    d3.json("world2.json", function (data) { 

     svg.selectAll("g") 
     .data(data.features) 
     .enter() 
     .append("g") 
     .append("path") 
     .attr("d", path) 
    }); 


    d3.json("goldq.json", function (data) { 

     var sel = svg.selectAll("g") 
     .data(data.features); 

     sel.enter() 
     .append("g") 
     .append("path"); 

    sel.transition().duration(1000).attr("d", path) 

    sel.exit().remove(); 


    });

Какие результаты в следующем: http://www.geos.ed.ac.uk/~s1227289/world/lars.html

Что мне не хватает?

источник

2013-06-09 DGraham

Вам необходимо обновить путь, как только вы нарисовали его:

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

d3.json("world2.json", function (data) { 

    svg.selectAll("g") 
    .data(data.features) 
    .enter() 
    .append("g") 
    .append("path") 
    .attr("d", path) 
}); 

d3.json("goldatt2.json", function (data) { 

    var sel = svg.selectAll("g") 
    .data(data.features); 

    sel.enter() 
    .append("g") 
    .append("path"); 

sel.attr("d", path); 

sel.exit().remove(); 
});

Несколько общих замечаний. Элемент h. В приведенном выше коде порядок выполнения не гарантируется, так как d3.json является асинхронным. Вам нужно убедиться, что он выполняется в том порядке, в котором вы хотите себя, например, путем вложенности вызовов в d3.json.

источник

2013-06-09 17:43:13

Но как же я делаю переход между двумя объектами? Это очень очевидно? Я просмотрел ряд примеров и стал еще более запутанным. – DGraham

Извините, если это очень очевидно @Lars Kotthoff – DGraham

В каждом случае вы передаете разные данные. Эти данные определяют, что нарисовано, и поэтому вы должны получить разные пути. Если вы хотите оживить переход, сделайте что-то вроде 'sel.transition(). Duration (1000) .attr (« d », path)». –

d3.js Переходы GeoJSON

ответ

Смежные вопросы