Question

我正在使用这种方法在带有正投影的地图上绘制点：

    var path = d3.geo.path()
        .projection(…)
        .pointRadius(function(d) { return d.radius; });

    svg.selectAll("path.point")
        .data(data)
      .enter().append("path")
        .datum(function(d) {
           return {type: "Point", coordinates: [d.Lon, d.Lat], radius: d.Magnitude};
        })
        .attr("class", "point")
        .attr("d", path);

这很有效。

如何使这些点显示为三角形而不是圆圈？

Answer 1

您可以使用d3.svg.symbol（）。

    //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) + ")"; });

有一些预定义的符号：

circle - a circle.
cross - a Greek cross or plus sign.
diamond - a rhombus.
square - an axis-aligned square.
triangle-down - a downward-pointing equilateral triangle.
triangle-up - an upward-pointing equilateral triangle.

这里有迈克的维基：https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol

在这里，您可以看到正常工作的代码：http://jsfiddle.net/6d3ansfn/

Answer 2

以下是使用路径几何对象生成三角形标记的解决方案。两个初始坐标作为每个三角形的中心点。

#!/usr/bin/python

# Turn on debug mode.
import cgitb
cgitb.enable()

# Print necessary headers.
print("Content-Type: text/html")
print()

# Connect to the database.
import pymysql
conn = pymysql.connect(
    db='example',
    user='root',
    passwd='your_root_mysql_password',
    host='localhost')
c = conn.cursor()

# Insert some example data.
c.execute("INSERT INTO numbers VALUES (1, 'One!')")
c.execute("INSERT INTO numbers VALUES (2, 'Two!')")
c.execute("INSERT INTO numbers VALUES (3, 'Three!')")
conn.commit()

# Print the contents of the database.
c.execute("SELECT * FROM numbers")
print([(r[0], r[1]) for r in c.fetchall()])

正投影上的自定义标记

2 个答案: