Question

当我在地球上渲染纬度/经度点（my_coords）时：

svg.append("path")
      .datum({type: "MultiPoint", coordinates: my_coords})
      .attr("class", "points")
      .attr("d", path);

我得到了圈子。我可以用CSS更改颜色，但是如何将符号从圆圈更改为三角形？我试过了：

svg.append("path")
  .datum({type: "MultiPoint", coordinates: my_coords})
    .attr("class", "point")
    .attr("d", d3.svg.symbol().type("triangle-up"));

但这不起作用。

Answer 1

你可以试试这个：

    //define triangle
var arc = d3.svg.symbol().type('triangle-up');
    // put a triangle on every city

svg.selectAll(".tripath")
    .data(topojson.feature(uk, uk.objects.places).features)
 .enter().append("path")
    .attr('d',arc)
.attr("transform", function(d) {
return "translate(" + projection(d.geometry.coordinates) + ")"; });

这是工作代码：http://jsfiddle.net/6d3ansfn/

这里是Mike的github：https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol

中的SVG Shape参考

示例代码来自Mike：http://bost.ocks.org/mike/map/

如果您有.tsv文件宽度坐标，请使用：

svg.selectAll(".tripath")
      .data( my_coords)
    .enter().append("path")
      .attr('d',arc)
      .attr("transform", function(d) {
      return "translate(" + projection(d) + ")"; });

记住拖动和/或缩放的更新提示。

更改d3的GeoPaths MultiPoints中的符号

1 个答案: