0

そこで、HTML テンプレートで D3 データマップをレンダリングする Angular ディレクティブを作成しました。「data」属性を介してデータをディレクティブに渡します。私が直面している問題は、ページが初めて読み込まれたときにマップが完全に表示されることです。ただし、他のテンプレートからナビゲートしてテンプレートに戻ると (「ui-route」を介してルーティングが行われます)、マップはレンダリングされず、コンソールにもエラーはありません。これが私のディレクティブです：

app.directive('stabilityMap', function() {
    var containerid = document.getElementById('world-map-container');
    var margin = 20,
        padding = 50,
        width = containerid.offsetWidth - margin;
        height = containerid.offsetHeight - margin;
    return {
        restrict: 'A',
        scope: {
            data: '=',
        },
        link : function(scope, element, attrs) {
            scope.$watch('data', function(newVal, oldVal) {   
                var colorScale = d3.scale.linear().domain([50, 100]).range(['#ff0000', '#280000']);
                var Fills = {defaultFill: '#ddd'};
                var Data = {};
                var countries = Datamap.prototype.worldTopo.objects.world.geometries;
                for(var i = 0; i < newVal.length; i++) {
                    for (var j = 0; j < countries.length; j++) {
                        if(countries[j].properties.name == newVal[i].Country) {
                            Fills[countries[j].id] = colorScale(newVal[i]['Stability Index']);
                            Data[countries[j].id] = { fillKey : countries[j].id};
                        }
                    }
                }
                var map = new Datamap({
                    element: containerid,
                    responsive: true,
                    projection: 'mercator',
                    setProjection: function(element) {
                                    var projection = d3.geo.mercator()
                                      .center([0, padding])
                                      .scale(105)
                                      .translate([element.offsetWidth / 2, element.offsetHeight / 2 - 70]);
                                    var path = d3.geo.path()
                                      .projection(projection);
                                    return {path: path, projection: projection};
                                  },
                    fills: Fills,
                    data: Data
                })
                d3.select(window).on('resize', function() {
                    map.resize();
                });
            })
        }
    }
})

テンプレートの角度コントローラーは次のとおりです。

app.controller('CountryCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.countriesData = [
        {'Country': 'Australia', 'Stability Index':'85'},
        {'Country':'United States of America', 'Stability Index':'90'},
        {'Country':'Russia', 'Stability Index':'70'},
        {'Country':'India', 'Stability Index':'84.2'},
        {'Country':'China', 'Stability Index':'50'}
    ]
}]);

HTML テンプレートは次のとおりです。

<div class="row" id="world-map">
    <div stability-map data="countriesData" id="world-map-container">
    </div>
</div>

ページが最初にロードされたときのスクリーンショットを次に示します。

ページ/ウェブサイトが最初に読み込まれたとき

そして、ウェブサイトの他のテンプレートから移動した後、ページに戻った後の空のコンテナ。

SVG を格納する空のコンテナ

何が起こっているのか分かりますか？

4

2 に答える 2

0

コードが最初に実行されるときに関数が一度だけ実行されるため、マップは再度レンダリングされません。マップの作成を関数内にラップし、(コントローラーから) ページをロードするたびにその関数を呼び出すことをお勧めします。

$scope.renderMap = function() { 
   var map = new Datamap({
                    element: containerid,
                    responsive: true,
                    projection: 'mercator',
                    setProjection: function(element) {
                                    var projection = d3.geo.mercator()
                                  .center([0, padding])
                                  .scale(105)
                                  .translate([element.offsetWidth / 2, element.offsetHeight / 2 - 70]);
                                var path = d3.geo.path()
                                  .projection(projection);
                                return {path: path, projection: projection};
                              },
                    fills: Fills,
                    data: Data
                })
}

マップをレンダリングするために必要なコードは次のとおりです。

$scope.renderMap()

これが役立つことを願っています。

XO XO

于 2015-06-08T14:02:35.793 に答える
0

これに対する答えを見つけました。リンク関数内に変数を配置する必要があります。これは移動することを意味します

var containerid = document.getElementById('world-map-container');
var margin = 20,
    padding = 50,
    width = containerid.offsetWidth - margin;
    height = containerid.offsetHeight - margin;

リンク関数のすぐ内側。これで問題は解決しました。

于 2018-03-11T05:58:31.673 に答える