我试图了解如何使用 d3.js 和 HTML5 canvas 创建国家/地区 map 的简约示例。我设法实现了以下代码，
<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 中是否有带有 Canvas 的美国 map 的简约示例
最佳答案
您没有在 Canvas 内绘制任何内容，这就是它失败的原因。
下面的代码可以工作并给出图像中的结果，你可以在 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>
让我们看看它是如何工作的:
- 唯一发生变化的部分是加载 json 之后
- 我已将您的 Tunisia.json 文件更改为另一个文件，因为我没有您的文件。如果它是正确的 JSON，您的文件应该可以工作，尽管您会看到突尼斯很小。要更改此设置，请更改投影对象的缩放属性。
- 变量 land 拥有 topojson 文件中的所有多边形
- context 是用于在 Canvas 中绘制元素的对象。它有很多功能，画线、删除等。You have all theme here 。
- 然后我们使用 StrokeStyle 和 fillStyle 将线条颜色设置为黑色，将填充颜色设置为灰色。当您从此时调用任何函数时，将使用这些值
- 现在使用 beginPath() 方法启动一个路径，因此以下所有操作都会向该路径添加属性
- 下一个命令实际上绘制了所有内容:
- 您已将上下文添加到路径定义中，因此传递到此路径的所有数据都将添加到上下文中。由于 land 变量具有多边形，因此将绘制多边形。
- fill 方法用定义的颜色填充多边形。如果不调用它，则不会绘制任何内容
关于javascript - 带有 HTML5 Canvas 的 D3.js map 未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25905671/