​

​

    function callout(parameters) {

        var w = parameters.width || 200,

                h = parameters.height || 100,

                a = w / 2,

                b = h / 2,

                o_x = parameters.x0 || 100,

                o_y = parameters.y0 || 100,

                m_r = parameters.l || 300,

                m_w = 10,

                m_q = parameters.angle * Math.PI / 180 || 50 * Math.PI / 180,

                m_q_delta = Math.atan(m_w / (2 * Math.min(w, h)));

        var d = "M", x, y, 

                d_q = Math.PI / 30; // 1/30 -- precision of drawing

​

        // now, we are drawing the path step by step

        for (var alpha = 0; alpha < 2 * Math.PI; alpha += d_q) {

            if (alpha > m_q - m_q_delta && alpha < m_q + m_q_delta) { //edge

                x = o_x + m_r * Math.cos(m_q);

                y = o_y + m_r * Math.sin(m_q);

                d += "L" + x + "," + y;

                alpha = m_q + m_q_delta;

            } else { // ellipse

                x = a * Math.cos(alpha) + o_x;

                y = b * Math.sin(alpha) + o_y;

                d += "L" + x + "," + y + " ";

            }

        }

        d += "Z";

        return(d.replace(/^ML/, "M").replace(/ Z$/, "Z"));

    }

    var styles = {

        board: {width: 1000, height: 1000},

        callout: {stroke: "black", "stroke-width": 1, fill: "snow"}

    };

    var callout_params = {

        width: 300,

        height: 100,

        angle: 20,

        l: 250,

        x0: 200,

        y0: 200

    };

    var board = d3.select("body").append("svg:svg").attr(styles.board);

    var defs = board.append("svg:defs");

    var callout = board.append("svg:path").attr(styles.callout).attr("d", callout(callout_params));