D3.js映射HTML5画布未显示

时间:2014-09-18 06:28:22

标签: javascript html5 canvas d3.js html5-canvas

我正在尝试了解如何使用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

中是否有任何带有画布的美国地图的简约示例

1 个答案:

答案 0 :(得分:1)

你没有在画布里画任何东西,这就是它失败的原因。

enter image description here

以下代码可以使用,并会在图片中显示结果,您可以在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是用于在画布中绘制元素的对象。它有许多功能,用于绘制线条,擦除等等。You have all theme here
  • 然后我们使用strokeStyle和fillStyle将线条颜色设置为黑色,将填充颜色设置为灰色。从此处调用任何函数时,将使用这些值
  • 现在使用方法beginPath()启动路径,因此以下所有操作都将向此路径添加属性
  • 下一个订单实际上绘制了所有内容:
    • 您已将上下文添加到路径定义中,因此您传递到此路径的所有数据都将添加到上下文中。由于土地变量具有多边形,因此将绘制多边形。
  • 填充方法使用定义的颜色填充多边形。如果你不打电话,将不会有任何内容