You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

D3.js地图开发中datum与data的行为差异及异常原因问询

data()与datum()的核心差异
  • datum():直接为单个选中元素绑定完整的传入数据,不会对数据做拆分处理,你传入的对象是什么,就会把整个对象绑定到当前选中的DOM元素上。
  • data():用于完成选中元素集合与数据集的联接(join)操作,要求传入的数据为数组格式,会将数组内的每一项与选中的DOM元素逐一匹配绑定。
本场景渲染异常的具体原因
  1. 你代码中mapGroup.append("path")仅创建了1个path元素,topojson.feature(world, world.objects.land)返回的是单个GeoJSON Feature对象,不是数组。
  2. 当你把datum()替换为data()时,data()会将传入的单个Feature对象视作待联接的数据集,由于传入值不是数组,匹配到的待更新元素集合为空,后续设置class、d属性的操作都不会执行。path元素没有有效的d属性,自然不会渲染出地图内容。
  3. 如果你需要用data()实现相同效果,只需将传入的数据包装为数组即可:
mapGroup.append("path") 
   .data([topojson.feature(world, world.objects.land)])
   .attr("class", "land") 
   .attr("d", path); 

内容的提问来源于stack exchange,提问作者Siddharth Krishnamoorthy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 12:45:02