在d3js中，如何在此地球仪上而不是圆形上绘制自定义形状（<path>）？

Question

我在这里找到了d3地球：http://bl.ocks.org/PatrickStotz/1f19b3e4cb848100ffd7

更新：

由于@Lary Ciminera的回答，该图钉现已摆在地球上，但位置不正确。例如，在这种情况下，我希望图钉位于纽约（在中心，我手动放置图钉），但它位于左侧和上方。

此代码将城市标记为点：

path.pointRadius(function(d) {
   return d.properties ? rScale(d.properties.population) : 1;

});

// Drawing transparent circle markers for cities
g.selectAll("path.cities").data(data.features)
   .enter().append("path")
   .attr("class", "cities")
   .attr("d", path)
   .attr("fill", "#ffba00")
   .attr("fill-opacity", 0.3);

但是，我想使用svg图形替换圆，例如，我在自己的路径代码中定义的引脚：

<path d="M217.087,119.397c-24.813,0-45,20.187-45,45s20.187,45,45,45s45-20.187,45-45S241.901,119.397,217.087,119.397z"/>
<path d="M217.087,0c-91.874,0-166.62,74.745-166.62,166.619c0,38.93,13.421,74.781,35.878,103.177l130.742,164.378l130.742-164.378
  c22.457-28.396,35.878-64.247,35.878-103.177C383.707,74.745,308.961,0,217.087,0z M217.087,239.397c-41.355,0-75-33.645-75-75
  s33.645-75,75-75s75,33.645,75,75S258.443,239.397,217.087,239.397z"/>

Answer 1

它使用导入的geojson "geometry":{"type":"Point","coordinates":[lat ,long]}中的几何图形

您可以做的是使每个值绘制路径并将其移动到正确的坐标上，而不是制作“路径”类型的路径放置几何图形

  g.selectAll("path.cities").data(data.features)
        .enter().append("path")
        .attr("class", "cities")
        .attr('d',"M217.087,0c...43,239.397,217.087,239.397z") // drawn your path
        .attr('transform', d => {
           //here you move it to the correct position (scale is because your path is too big
           return `translate(${projection(d.geometry.coordinates)}) scale(0.1)`;
         })
        .attr("fill", "#ffba00");