D3.js 在d3.geo MultiPoint中，如何为不同的点提供不同的形状？

我有一些geoJson数据，我正在使用d3.geo绘制图表

当我写这样的东西时

d3.select("svg")
   ... 
   .attr("d", function(d) {
                return path({
                    type:"MultiPoint",
                    coordinates: get_activity_coords_(d.activities)
                });
   })

每个坐标都有一个圆。坐标表示旅程中各个停车点的位置。我更喜欢的是第一个和最后一个坐标的不同形状

是否可以使用MultiPoint实现这一点，是否有我可以遵循的示例？我可以一个接一个地画出这些点，但我记得读到多点要快得多。另外，代码会更清晰易读

---

非常感谢。

您无法使用

d3.geo.path

为多点geoJSON创建不同的形状。可以，但看起来只能按功能设置，而不能按点设置，因此必须将点集拆分为多个功能，并失去使用单个元素的任何性能优势

然而，还有其他方法可以做到这一点

如您所述，一个选项是为每个点创建一个嵌套的选择，每个点都有一个单独的

元素，并使用

d3.svg.symbol（）

函数绘制每个路径。然后可以根据数据或索引自定义符号函数

var trips = d3.select("svg").selectAll("g.trips")
               .data(/*The data you were currently using for each path,
                       now gets to a group of paths */)
               .attr("class", "trips"); 
               //also set any other properties for the each trip as a whole

var pointSymbol = d3.svg.symbol().type(function(d,i){
                    if (i === 0) 
                        //this is the first point within its groups
                        return "cross";
                    if ( this === this.parentNode.querySelector("path:last-of-type") )
                        //this is the last point within its group
                        return "square";
                    //else:
                    return "circle";
               });


var points = trips.selectAll("path")
               .data(function(d) {
                   return get_activity_coords_(d.activities);
                   //return the array of point objects
                })
               .attr("transform", function(d){ 
                         /* calculate the position of the point using 
                            your projection function directly */
                })
               .attr("d", pointSymbol);

另一个选项允许您为第一个点和最后一个点（但所有中间点都是相同的）设置自定义形状，即将这些点连接为单个不可见

元素的顶点，并用于绘制点符号

你的做法是：

在SVG中创建一个

元素（硬编码或使用d3动态编码），并在其中定义开始、中间和结束标记点。（您可以使用

d3.svg.symbol（）

函数绘制路径，或创建自己的路径，或使用图像，这取决于您自己。）

使用

d3.svg.line（）

函数根据点坐标数组创建路径的“d”属性；直线的x和y访问器函数应使用用于地图的投影函数，以从该点的坐标获取x/y位置。为了避免计算两次投影，可以在数据对象中保存投影坐标：

 var multipointLine = d3.svg.line()
                      .x(function(d,i) {
                          d.projectedCoords = projection(d);
                          return d.projectedCoords[0];
                        })
                      .y(function(d){ return d.projectedCoords[1];});

（您不能使用

d3.geo.path（）

函数将线绘制为地图功能，因为它会将线拆分为曲线，以匹配地图投影中的经纬线曲线；要使线标记正常工作，路径需要只是点之间的简单直线连接。）

将该路径上的样式设置为无笔划和无填充，这样线本身就不会显示，但随后将线上的

标记开始

、

标记中间

和

标记结束

属性设置为引用正确标记元素的id值

下面是一个使用d3动态生成线标记的示例：

---

听起来您需要更改传递到

路径

函数的坐标。非常感谢。我的用户被曲线连接器钩住了，这也是因为它们显示了大致的行程路径。但是学习线条标记并修补它们是很好的！！