create custom shape not connects to edges

[tzookb]

wanted to create a simple shape with a circle and "+" text in it like this:

render.shapes().plusShape = function(parent, bbox, node) {
    var w = bbox.width;
    var h = bbox.height;

    var shapeSvg = parent
        .insert('circle', ':first-child')
        .attr('r', 8)
        .style('fill', '#CCCCCC')
        .style('color', 'white')

    parent
        .append('text')
        .text('+')
        .attr('transform', 'translate(-4.5,4)')
        .style('font-size', '15')
        .style('font-weight', 'bold')
        .style('fill', 'white')
        .style('cursor', 'pointer')

    // node.intersect = function(point) {
    //     return dagreD3.intersect.polygon(node, points, point);
    // };

    return shapeSvg;
};

the view itself looks great, but when I try to connect it with other nodes, the edges are not getting connected...

any ideas what I did wrong? tried to look up, but no docs yet only examples

[tzookb]

my desired result :)

[herzaso]

the intersect function is the part that positions the edges. dagreD3.intersect contains a method called intersectCircle which might be appropriate to your shape... https://github.com/dagrejs/dagre-d3/blob/master/lib/intersect/intersect-circle.js