个人中心
gpt4 book ai didi

javascript - 带有 HTML5 Canvas 的 D3.js map 未显示

转载 作者：行者123 更新时间：2023-12-03 11:49:15 24 4
gpt4 key购买 nike

我试图了解如何使用 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 内绘制任何内容，这就是它失败的原因。

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 是用于在 Canvas 中绘制元素的对象。它有很多功能，画线、删除等。You have all theme here 。
  • 然后我们使用 StrokeStyle 和 fillStyle 将线条颜色设置为黑色，将填充颜色设置为灰色。当您从此时调用任何函数时，将使用这些值
  • 现在使用 beginPath() 方法启动一个路径，因此以下所有操作都会向该路径添加属性
  • 下一个命令实际上绘制了所有内容:
    • 您已将上下文添加到路径定义中，因此传递到此路径的所有数据都将添加到上下文中。由于 land 变量具有多边形，因此将绘制多边形。
  • fill 方法用定义的颜色填充多边形。如果不调用它，则不会绘制任何内容

关于javascript - 带有 HTML5 Canvas 的 D3.js map 未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25905671/

24 4 0
文章推荐： javascript - 如何禁用使用 bootstrapvalidator 验证空字段？
文章推荐： c# - 来自 Socket 的 UWP SendToAsync 导致 AddressFamilyNotSupported
文章推荐： c# - 套接字关闭 : when should I use SocketShutdown. 两者
文章推荐： javascript - 使用 js 在 html 附加中转义斜杠
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com