0

datamaps の「はじめに」ページには、ユーザーが特定の国にカーソルを合わせたときのテキストのカスタマイズに関するセクションがあります。ただし、その情報をハードコーディングすることでこれを行います。

<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },
        data: {
            IRL: {
                fillKey: 'LOW',
                numberOfThings: 2002
            },
            USA: {
                fillKey: 'MEDIUM',
                numberOfThings: 10381
            }
        },
        geographyConfig: {
            popupTemplate: function(geo, data) {
                return ['<div class="hoverinfo"><strong>',
                        'Number of things in ' + geo.properties.name,
                        ': ' + data.numberOfThings,
                        '</strong></div>'].join('');
            }
        }
    });
</script>

簡単に更新できるように、外部の .json ファイルからその情報をロードしたいと思います。これどうやってするの？を設定しようとしましdataURLたが、更新する必要のない完全な topojson ファイルが必要です。どんな助けでも大歓迎です！

4

1 に答える 1

2

dataUrlルート レベルでは、次の例のように json または csv ファイルを使用できます: http://bl.ocks.org/markmarkoh/11331459

      var election = new Datamap({
        scope: 'usa',
        element: document.getElementById('container1'),
        geographyConfig: {
          popupTemplate: function(geo, data) {
            return data && data.info && "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
          },
          highlightOnHover: false,
          borderColor: '#444',
          borderWidth: 0.5
        },
        dataUrl: 'data.json',
        dataType: 'json',
        data: {},
        fills: {
          'Visited': '#306596',
          'neato': '#0fa0fa',
          'Trouble': '#bada55',
          defaultFill: '#dddddd'
        }
      });

のリソースはdata.json次のようになります。

{
  "NY": {"fillKey": "Visited", "anotherProperty": "Born here"},
  "TX": {"fillKey": "Visited", "anotherProperty": "Live here"},
  "CA": {"fillKey": "Visited", "anotherProperty": "Here while writing this code"}
}
于 2016-06-21T16:02:20.557 に答える