d3.js GeoJSON transitions

Question

I have created two GeoJSON objects, and when I inspect the element I can see them both listed. I have looked through numerous transition tutorials on d3.js and am still lost as to how to draw one, then transition to the other.

I have tried to implement the exit().remove() function within the second geoJSON object, but have failed to make this work. I am very much lost, and cannot seem to make anything I have found work.

I understand that the code below is very basic, but all the things I have tried have failed beyond this point.

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

This has been changed to:

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


    });

Which results in the following: http://www.geos.ed.ac.uk/~s1227289/world/lars.html

What am I missing?

Answer 1

You need to update the path once you've drawn it:

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

A few general notes. There is no h element. In the code above, the order of execution is not guaranteed as d3.json is asynchronous. You need to make sure that it executes in the order you want yourself, for example by nesting the calls to d3.json .

d3.js GeoJSON transitions

Question

1 answers

solution1
0 2013-06-09 17:43:13

d3.js GeoJSON transitions

Question

1 answers

solution1 0 2013-06-09 17:43:13

solution1
0 2013-06-09 17:43:13