我正在尝试了解如何使用d3.js和HTML5 canvas 创建国家/地区地图的简约示例。我设法实现了以下代码,
<html>
<head>
<title></title>
</head>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript">
// drawing a map in a canvas
var width = 960, height = 500;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height",height);
var context = canvas.node().getContext("2d");
var projection = d3.geo.mercator();
var path = d3.geo.path()
.projection(projection)
.context(context);
d3.json("tunisia.json", function(error, topology) {
canvas
.datum(topojson.object(topology, topology.objects.governorates))
.transition();
});
</script>
</html>
但是,浏览器中没有显示任何结果,并且控制台中没有收到任何错误,请您检查一下。另外,在d3.js
中是否有任何带有画布的美国地图的简约示例答案 0 :(得分:1)
你没有在画布里画任何东西,这就是它失败的原因。
以下代码可以使用,并会在图片中显示结果,您可以在this jsbin处使用它:
<html>
<head>
<title></title>
</head>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script type="text/javascript">
// drawing a map in a canvas
var width = 960, height = 500;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height",height);
var context = canvas.node().getContext("2d");
var projection = d3.geo.mercator();
var path = d3.geo.path()
.projection(projection)
.context(context);
d3.json("https://cdn.rawgit.com/mbostock/4090846/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, data) {
var land = topojson.object(data, data.objects.land);
context.strokeStyle = '#000000';
context.fillStyle = '#aaaaaa';
context.beginPath();
path(land);
context.fill();
});
</script>
</html>
让我们看看它是如何运作的: