d3.geomap在Grails应用程序中未定义

d3.geomap is undefined in Grails application

本文关键字：未定义 应用程序 Grails geomap d3      更新时间：2023-09-26

我在Grails中使用d3.geomap创建美国地图。

如中所述https://d3-geomap.github.io/我的gsp看起来像：

<html>
<head>
    <meta name="layout" content="main" charset="utf-8">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'd3.geomap.css')}" type="text/css">
    <g:javascript src="d3.geomap.dependencies.min.js" />
    <g:javascript src="d3.geomap.min.js" />
</head>
<body>
    <script>
        var map = d3.geomap.choropleth()
                .geofile('/topojson/countries/USA.json')
                .projection(d3.geo.albersUsa)
                .column('2012')
                .unitId('fips')
                .scale(1000)
                .legend(true);
        d3.csv("mapusa", function(error, data) {
            d3.select('#map')
                    .datum(data)
                    .call(map.draw, map);
        });
    </script>
    <div id="map"></div>
</body>
</html>

css文件d3.geomap.css位于web-app/css下。

js文件d3.geomap.dependences.min.js和d3.geomap.min.js位于web app/js下。

在grails app/views/I下，有一个topojson文件夹。

当我运行页面时，它会给我：

未捕获的类型错误：无法读取未定义的属性"choropleth"

d3.geomap未定义。

有什么想法吗？

提前谢谢。

在我的main.gsp中，我有：

<script src="http://d3js.org/d3.v3.min.js"></script>

当我删除它时，d3.geomap有值并显示美国地图。我不知道他们为什么会发生冲突。

试试下面的代码，你会得到你想要的世界地图输出。同样，你也可以对美国地图这样做。

<head>
 <meta charset="utf-8">
    <link href="https://d3-geomap.github.io//d3-geomap/css/d3.geomap.css" rel="stylesheet">
    <script src="https://d3-geomap.github.io//d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
    <script src="https://d3-geomap.github.io//d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = d3.geomap().geofile('https://d3-geomap.github.io//d3-geomap/topojson/world/countries.json');
d3.select('#map')
.call(map.draw, map);
</script>
相关文章：