0

我创建了两个 GeoJSON 对象，当我检查元素时，我可以看到它们都列出了。我浏览了许多关于 d3.js 的过渡教程，但仍然不知道如何绘制一个，然后过渡到另一个。

我试图在第二个 geoJSON 对象中实现 exit().remove() 函数，但未能成功。我非常迷茫，似乎无法完成我找到的任何工作。

我知道下面的代码非常基本，但是我尝试过的所有事情都失败了。

<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

我错过了什么？

4

1 回答 1

0

绘制路径后，您需要更新路径：

 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-09T17:43:13.823 回答