在d3js中渲染多个svg

Question

我试图在d3js中渲染圆圈。在乘以svg：s。在我的HTML中，我有所有的svg：s喜欢这个。

        <section id="a" class="render">
            <svg></svg>
        </section>
        <section id="b" class="render">
            <svg></svg>
        </section>
        <section id="c" class="renderr">
            <svg></svg>
        </section>
        <section id="d" class="render">
            <svg></svg>
        </section>

我想做的是这个。根据一些值，我从json-call回来，我想渲染和动画不同svgs中的圆圈。

我的javascript看起来像这样。

    for(i = 0; i<json.answers[0].length; i++) {

        personal.color = json.answers[0][i].color;
        personal.answer = json.answers[0][i].alternative_id;

        if(json.answers[0][i].alternative_id == 1) {
            drawSvg("#a")
        }
        if(json.answers[0][i].alternative_id == 2) {
            drawSvg("#b")
        } 
        if(json.answers[0][i].alternative_id == 3) {
            drawSvg("#c")
        } 
        if(json.answers[0][i].alternative_id == 4) {
            drawSvg("#d")
        } 
        createCircle(personal);
    }

drawSvg = function(el) {
    svg = d3.select(el+ " svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)

    force.on("tick", function(e) {
        svg.selectAll("path")
            .attr("transform", function(d) { 
                return "translate(" + d.x + "," + d.y + ")"; 
            }
        );
    });
}

createCircle = function(p) {
    people.push({
        type: "circle",
        size: Math.random() * 1200 + 700
    });

    force.start();

    svg.selectAll("path")
    .data(people)
    .enter().append("path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("d", d3.svg.symbol()
    .size(function(d) { return d.size; })
    .type(function(d) { return d.type; }))
    .style("fill", p.color)
    .attr("class","person")
    .attr("id","p_"+index)

    index++;

}