有很多使用 D3 的路径投影工具从 D3 地理数据绘制 SVG 路径的示例。例如,here's one I wrote earlier (D3 v3),这里是 recent example using D3 v4。
它们看起来都是这样的:
svg.append("path")
.data(topojson.feature(datafile, datafile.objects.featureOfInterest))
.attr("class", "land")
.attr("d", pathDefinitionObject);
...读取数据文件并将其与某些 SVG 相关联,创建链接的空路径,然后与特定投影相关联的 D3 路径定义对象查看数据并使用它将 SVG 路径定义字符串添加到 d
这些路径的属性。
我想要的是那些路径定义字符串,但作为字符串,不涉及任何 SVG。我想将这些字符串与 Raphael 一起使用,以便我可以在不支持的浏览器上绘制路径SVG,因为某个特定项目需要支持机构客户,这些客户由于遗留软件要求和公司政策尚未从 IE8 升级(我知道,我知道...)。
D3 显然能够定义这些字符串,但我看不到一种明显的方法可以让路径定义对象在不链接到 DOM SVG 元素的情况下输出字符串。
我怎样才能在页面上没有任何 SVG 的情况下只获取字符串?
我正在尝试为此使用最小的 D3 v4's "microlibraries" 集,因此对于具有最少 D3 依赖性的答案加分(特别是如果它可以避免相当大的 D3-selection.js - 理想情况下我想对于这个项目,只使用 D3 的数据处理,根本不使用它的 DOM 操作。
最佳答案
构建您的链接 v4
示例,仅获取陆地路径 d
属性的极简代码将是:
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3-array.v1.min.js"></script>
<script src="//d3js.org/d3-geo.v1.min.js"></script>
<script src="//d3js.org/d3-request.v1.min.js"></script>
<script src="//d3js.org/d3-dispatch.v1.min.js"></script>
<script src="//d3js.org/d3-collection.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var projection = d3.geoAlbers()
.scale(1280)
.translate([500, 500]);
var path = d3.geoPath()
.projection(projection)
.pointRadius(1.5);
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us){
if (error) throw error;
var topo = topojson.feature(us, us.objects.land);
console.log(path(topo));
});
</script>
如果您不使用d3.json
,您可以删除d3-request
、d3-dispatch
和d3-集合
库。
关于d3.js - 如何使用 D3 从 GeoJSON 数据集中获取投影路径定义字符串(不是 SVG 元素)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38611939/