Back

d3 - svg path标签：超级重要

发布时间: 2021-05-08 02:54:00

普通SVG（基础）

svg 可以画的有：  Circle, Line, Polygon, Path ...  指定起始位置就好（通过数字）

D3 GEO SVG （进阶）

参考：https://stackoverflow.com/questions/10261992/d3-js-add-a-circle-in-d3-geo-path

d3 geo svg 则是通过 地理坐标来指定，可以画的有：

支持的类型: Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon

通过经纬度来画多边形：

1. 手动创建geojson: https://gis.stackexchange.com/questions/49114/d3-geo-path-to-draw-a-path-from-gis-coordinates  （我可以帮他补充答案）

2. 创建geojson小部分格式的对象，然后传递进去（满足要求了） ：http://bl.ocks.org/erikhazzard/6201948

        links = [];
        for(var i=0, len=data.length-1; i < len; i++){
            // (note: loop until length - 1 since we're getting the next
            //  item with i+1)
            links.push({
                type: "LineString",
                coordinates: [
                    [ data[i].lon, data[i].lat ],
                    [ data[i+1].lon, data[i+1].lat ]
                ]
            });
        }

        // Standard enter / update 
        var pathArcs = arcGroup.selectAll(".arc")
            .data(links);

3. 不考虑geojson 的格式，直接使用程序中的变量, 参考：https://observablehq.com/@d3/testing-projection-visibility?collection=@d3/d3-geo

3.1 定义好一个数组（本质上跟2是一样的）

points = Array(2980) [
  0: Array(2) [
  0: -158.617996216
  1: 59.2826004028
]
  1: Array(2) [160.054992675781, -9.42800045013428]
  2: Array(2) [157.263000488281, -8.32796955108643]
  3: Array(2) [-113.305864334, 31.351621252]
  4: Array(2) [166.919006, -0.547458]


然后，在下面代码中使用：

path({type: "MultiPoint", coordinates: points});

下面是一个例子： 读取CSV（中国机场），显示在中国地图上：

 84         d3.json(map_geo_json).then((geojson) => {
 85             svg.append("path")
 86                 .attr("d", path(geojson))
 87                 .attr('fill', 'white')
 88                 .attr("stroke", "red")
 89                 .attr("stroke-width", 1)
 90         }).then( () => {
 91 
 92           // read and print all the airports
 93           let airports = []
 94           d3.csv('static/china_airports.csv').then( (csv_line) => {
 95 
 96             let airports = csv_line.map(function(x){
 97               return [x.longitude, x.latitude]
 98             })
 99 
100             let final_geo_points = { type: "MultiPoint", coordinates: airports}
101 
102             svg.append("path")
103                 .attr("d", path(final_geo_points))
104                 .attr('fill', 'transparent')
105                 .attr("stroke", "blue")
106                 .attr("stroke-width", 1)
107           })
108         })

需要给这个人的文章 增加我的答案： （现有答案我觉得嗯。。。）

https://stackoverflow.com/questions/10261992/d3-js-add-a-circle-in-d3-geo-path

Back