Javascript 不显示带有HTML5画布的D3.js地图_Javascript_Html_Canvas_D3.js_Html5 Canvas

Javascript 不显示带有HTML5画布的D3.js地图

javascript html canvas d3.js html5-canvas

Javascript 不显示带有HTML5画布的D3.js地图,javascript,html,canvas,d3.js,html5-canvas,Javascript,Html,Canvas,D3.js,Html5 Canvas,我试图理解如何使用d3.js和HTML5画布创建一个简约的国家地图示例。我成功地实现了以下代码 <html> <head> <title></title> </head> <body> </body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.

我试图理解如何使用d3.js和HTML5画布创建一个简约的国家地图示例。我成功地实现了以下代码

<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中是否有使用画布绘制美国地图的简约示例？您没有在画布中绘制任何东西，这就是它失败的原因

以下代码将起作用，并将在图像中给出结果，您可以在以下位置使用它：

让我们看看它是如何工作的：

唯一改变的部分是加载json之后我已经将您的tunis.json文件更改为另一个，因为我没有您的文件。如果它是正确的JSON，您的文件应该可以工作，尽管您会看到它非常小。若要对此进行更改，请更改投影对象的“比例”特性。变量land包含topojson文件中的所有多边形上下文是用于在画布中绘制元素的对象。它有许多功能，画线，擦除等。然后我们使用strokeStyle和fillStyle将线条颜色设置为黑色，将填充颜色设置为灰色。从这一点调用任何函数时，将使用这些值现在，使用方法beginPath启动了一个路径，因此以下所有操作都将向该路径添加属性下一个订单实际上绘制了所有内容：您已将上下文添加到路径定义中，因此传递到此路径的所有数据都将添加到上下文中。由于land变量具有多边形，因此将绘制多边形。填充方法使用定义的颜色填充多边形。如果你不打电话，就不会有任何结果

你看到了吗？@Larskothoff:谢谢你的回复，我确实看过那个教程，但是没有解释实现过程。我特别不理解的是投影的定义，例如为什么墨卡托不工作，以及类型的配置。还有一个更简单的方法。@Larskothoff谢谢，这更清楚了。d3.js上是否有与画布相关的完整文档。

<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>