d3 - svg path标签:超级重要

访问量: 134

普通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

订阅/RSS Feed

Subscribe

分类/category