0

2 つの GeoJSON オブジェクトを作成しました。要素を調べると、両方がリストされていることがわかります。私は d3.js に関する多数の移行チュートリアルを調べましたが、一方を描画してから他方に移行する方法についてまだ迷っています。

2 番目の 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 に答える