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

