在吸血图上绘制不同的节点形状?

时间:2016-07-08 18:05:02

标签: javascript graph raphael

对于raphael js来说是非常新的,所以有点急于找到我如何用dracula图绘制多边形。这必须在costum渲染器中进行,例如:

var render = function(r, n) {
        /* the Raphael set is obligatory, containing all you want to display */
        var set = r.set().push(
            /* custom objects go here */
            r.rect(n.point[0]-30, n.point[1]-13, 62, 86)
                .attr({"fill": "#fa8", "stroke-width": 2, r : "9px"}))
                .push(r.text(n.point[0], n.point[1] + 30, n.label)
                    .attr({"font-size":"20px"}));
        /* custom tooltip attached to the set */
        set.items.forEach(
            function(el) {
                el.tooltip(r.set().push(r.rect(0, 0, 30, 30)
                    .attr({"fill": "#fec", "stroke-width": 1, r : "9px"})))});
        return set;
    };

如果有人处理了这样的话,那就会爱上帮助。

1 个答案:

答案 0 :(得分:0)

这解决了!在克里斯威尔逊的Raphael js上找到它。

var paper = Raphael(0, 0, 500, 500);

function NGon(x, y, N, side, angle) {
    paper.circle(x, y, 3).attr("fill", "black");

    var path = "",
        c, temp_x, temp_y, theta;

    for (c = 0; c <= N; c += 1) {
        theta = (c + 0.5) / N * 2 * Math.PI;
        temp_x = x + Math.cos(theta) * side;
        temp_y = y + Math.sin(theta) * side;
        path += (c === 0 ? "M" : "L") + temp_x + "," + temp_y;
    }
    return path;
}

paper.path(NGon(050, 50, 8, 40));