how to create a dynamic append using d3?

Question

I'm using d3 and I'd like to append a group with basic shapes attached to it, like the following:

startEvent (a circle)
task (a recangle)
endEvent (two circles)

since I'm new to d3 I'd like to know how to append each group dynamically depending on the 'shape type' and avoid to append each shape one by one using a foreach.

this is the code:

var shapes ={
    startEvent:function(id,x,y,params){
        var radius = 18,
        cy = Math.floor(Number(y) + radius),
        cx = Math.floor(Number(x) + radius),
        g = d3.select('g');

        var circle = g.append('circle')
            .attr('cx', cx)
            .attr('cy', cy)
            .attr('r', radius)
            .attr('id', id);

        if(params.label!==undefined){
            var txt = g.append('text')
            .attr('y',y).text(params.label);
                txt.attr('x',Number(x));
                txt.attr('y',Number(y));
        }
        return g;
    },
    endEvent:function(id,x,y, params){
       // something similar to startEvent, but with two circles instead of one
    },
    task:function(id,x,y, params){
       // something similar but with a rectangle
    }
};

passing the data and rendering the elements:

svg.selectAll('g')
    .data(data)
    .enter()
    .append(function(d){
        params={label: d.meta.name};
        return shapes[d.type](d.id,d.x,d.y,params);
     });

but I'm getting

Error: Failed to execute 'appendChild' on 'Node': The new child element is null.

I guess that's because I'm returning the selector, any ideas?

[This question](http://stackoverflow.com/questions/21727202/append-dom-element-to-the-d3) should help. — Lars Kotthoff, Nov 03 '14 at 18:16
thanks for the reference, but I just want to append a svg basic element and not an HTML object, — pedrommuller, Nov 03 '14 at 19:32
@LarsKotthoff in some way it helped me to find the solution, thanks! — pedrommuller, Nov 03 '14 at 22:01

score 0 · Accepted Answer · edited May 23 '17 at 11:57

based on this and this answers I got to the following point, it seems like you need to create an instance manually under the d3 namespace, once you got that you can use a d3 selector over it and return the node() of the element which return the actual DOM code.

this is the code:

var shapes ={
    startEvent:function(id,x,y,params){
        var radius = 18,
                    cy = Math.floor(Number(y) + radius),
                    cx = Math.floor(Number(x) + radius),
                    e =  document.createElementNS(d3.ns.prefix.svg,'g'),
                    g = d3.select(e).attr('id', id).
                    attr('class','node');
                    var circle = g.append('circle')
                    .attr('cx', cx)
                    .attr('cy', cy)
                    .attr('r', radius)
                    .attr('class','circle');

                    if(params.label!==undefined){
                        var txt = g.append('text')
                        .attr('y',y).text(params.label);
                        txt.attr('x',Number(x));
                        txt.attr('y',Number(y));

                    }
                    return g;
    },
    endEvent:function(id,x,y, params){
       // something similar to startEvent, but with two circles instead of one
    },
    task:function(id,x,y, params){
       // something similar but with a rectangle
    }
};

and then return the node

svg.selectAll('g')
    .data(data)
    .enter()
    .append(function(d){
        params={label: d.meta.name};
        var v = shapes[d.type](d.id,d.x,d.y,params);
        return v.node();
     });

how to create a dynamic append using d3?

1 Answers1