数据地图中的自定义地图

时间:2017-02-09 08:47:55

标签: javascript dictionary d3.js topojson datamaps

您好我使用d3 js和数据地图,我想展示世界上少数几个国家/地区。我已经在在线论坛上查看了帮助,但没有得到明确的想法或回复。

源代码:

<div id="container" style="position: relative; width: 900px; height: 500px;"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="http://datamaps.github.io/scripts/0.4.4/datamaps.world.min.js"></script>

<script>
var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },

        dataType: 'json', //for use with dataUrl, currently 'json' or 'csv'. CSV should have an `id` column
    dataUrl: null,
    geographyConfig: {
        dataUrl: null, //if not null, datamaps will fetch the map JSON (currently only supports topojson)
        hideAntarctica: true,
        borderWidth: 1,
        borderOpacity: 1,
        borderColor: '#FDFDFD',
        popupTemplate: function(geography, data) { //this function should just return a string
          return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
        },
        popupOnHover: true, //disable the popup while hovering
        highlightOnHover: true,
        highlightFillColor: '#FC8D59',
        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
        highlightBorderWidth: 2,
        highlightBorderOpacity: 1
    },
        done: function(datamap) {
            datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
                console.log(geography);
                var url = window.location.href;
                var arr = url.split("/");
                var result = arr[0] + "//" + arr[2]
                window.open(result+'/countries/view/'+geography.properties.name);
            });
        }

    });
</script>

它会显示所有国家/地区。但我想展示几个国家。 我如何通过那里的国家名单? 我想在custom.json或topojson的帮助下。我不知道。如果您有任何解决方案或指导,请告诉我。

0 个答案:

没有答案